diff --git a/docs/pages/experiments/joy/list.tsx b/docs/pages/experiments/joy/list.tsx index 219a92f2107175..f274b25160818f 100644 --- a/docs/pages/experiments/joy/list.tsx +++ b/docs/pages/experiments/joy/list.tsx @@ -365,7 +365,7 @@ function MuiNav() { }) } > - + @@ -593,7 +593,7 @@ const Gatsby = () => { '--joy-palette-neutral-textActiveBg': 'transparent', '--joy-palette-primary-textHoverBg': 'transparent', '--joy-palette-primary-textActiveBg': 'transparent', - '[data-mui-color-scheme="light"] &': { + '[data-mui-color-scheme="dark"] &': { '--joy-palette-text-secondary': '#635e69', '--joy-palette-primary-textColor': '#d48cff', }, diff --git a/docs/pages/experiments/joy/sheet.tsx b/docs/pages/experiments/joy/sheet.tsx index ec399d567e5bb4..6d158e8c18bc49 100644 --- a/docs/pages/experiments/joy/sheet.tsx +++ b/docs/pages/experiments/joy/sheet.tsx @@ -46,7 +46,7 @@ export default function JoySheet() { return ( diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx index ddf4eae9ad08c7..989f1ce5d49e7d 100644 --- a/packages/mui-joy/src/Avatar/Avatar.tsx +++ b/packages/mui-joy/src/Avatar/Avatar.tsx @@ -143,7 +143,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) { color = 'neutral', component = 'div', size = 'md', - variant = 'contained', + variant = 'light', imgProps, src, srcSet, @@ -250,7 +250,7 @@ Avatar.propTypes /* remove-proptypes */ = { srcSet: PropTypes.string, /** * The variant to use. - * @default 'contained' + * @default 'light' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['contained', 'light', 'outlined', 'text']), diff --git a/packages/mui-joy/src/Avatar/AvatarProps.ts b/packages/mui-joy/src/Avatar/AvatarProps.ts index 1ff9a64e207084..2df8cc48479edf 100644 --- a/packages/mui-joy/src/Avatar/AvatarProps.ts +++ b/packages/mui-joy/src/Avatar/AvatarProps.ts @@ -54,7 +54,7 @@ export interface AvatarTypeMap

{ sx?: SxProps; /** * The variant to use. - * @default 'contained' + * @default 'light' */ variant?: OverridableStringUnion, AvatarPropsVariantOverrides>; }; diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 1e6e9f51130f32..712e460561d0a8 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -6,7 +6,7 @@ import { useButton } from '@mui/base/ButtonUnstyled'; import composeClasses from '@mui/base/composeClasses'; import { styled, useThemeProps } from '../styles'; import { ExtendButton, ButtonTypeMap, ButtonProps } from './ButtonProps'; -import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; +import { getButtonUtilityClass } from './buttonClasses'; const useUtilityClasses = (ownerState: ButtonProps & { focusVisible: boolean }) => { const { color, disabled, focusVisible, focusVisibleClassName, fullWidth, size, variant } = @@ -104,11 +104,11 @@ const ButtonRoot = styled('button', { lineHeight: '1.25rem', }), ...(ownerState.size === 'lg' && theme.typography.h6), - [`&.${buttonClasses.focusVisible}`]: theme.focus.default, }, ownerState.fullWidth && { width: '100%', }, + theme.focus.default, theme.variants[ownerState.variant!]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx index 83831d4757eee0..b2a5f1f55f2d56 100644 --- a/packages/mui-joy/src/Checkbox/Checkbox.tsx +++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx @@ -6,7 +6,7 @@ import { unstable_capitalize as capitalize } from '@mui/utils'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import { useSwitch } from '@mui/base/SwitchUnstyled'; import { styled, useThemeProps } from '../styles'; -import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; +import { getCheckboxUtilityClass } from './checkboxClasses'; import { CheckboxProps, CheckboxTypeMap } from './CheckboxProps'; import CheckIcon from '../internal/svg-icons/Check'; import IndeterminateIcon from '../internal/svg-icons/HorizontalRule'; @@ -56,8 +56,8 @@ const CheckboxRoot = styled('span', { justifyContent: 'center', alignItems: 'center', verticalAlign: 'middle', - [`&.${checkboxClasses.focusVisible}`]: theme.focus.default, }, + theme.focus.default, theme.variants[ownerState.variant!]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index a919e59908444d..fcb3a75a055a5b 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -5,7 +5,7 @@ import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } import { useButton } from '@mui/base/ButtonUnstyled'; import composeClasses from '@mui/base/composeClasses'; import { styled, useThemeProps } from '../styles'; -import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; +import { getIconButtonUtilityClass } from './iconButtonClasses'; import { IconButtonProps, IconButtonTypeMap, ExtendIconButton } from './IconButtonProps'; const useUtilityClasses = (ownerState: IconButtonProps & { focusVisible: boolean }) => { @@ -67,8 +67,8 @@ const IconButtonRoot = styled('button', { // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button. transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', - [`&.${iconButtonClasses.focusVisible}`]: theme.focus.default, }, + theme.focus.default, theme.variants[ownerState.variant!]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx index 7bd294ad3f11b6..abec36160d79fb 100644 --- a/packages/mui-joy/src/Input/Input.tsx +++ b/packages/mui-joy/src/Input/Input.tsx @@ -57,6 +57,8 @@ const InputRoot = styled('div', { '--Input-placeholderOpacity': 0.5, '--Input-adornment-offset': 'calc(var(--Input-gutter) / 4)', // negative margin of the start/end adornment '--Input-focusedThickness': 'calc(var(--variant-outlinedBorderWidth, 1px) + 1px)', + '--Input-focusedHighlight': + theme.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500], boxSizing: 'border-box', height: `var(--Input-height)`, minWidth: 0, // forces the Input to stay inside a container by default @@ -91,17 +93,14 @@ const InputRoot = styled('div', { margin: 'calc(var(--variant-outlinedBorderWidth) * -1)', // for outlined variant }, }, - theme.variants[`${ownerState.variant!}`]?.[ownerState.color || 'neutral'], - theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color || 'neutral'], - theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color || 'neutral'], + theme.variants[`${ownerState.variant!}`]?.[ownerState.color!], + theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], + theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!], ownerState.variant !== 'contained' && { - color: theme.vars.palette[ownerState.color || 'neutral']?.overrideTextPrimary, [`&.${inputClasses.focused}`]: { backgroundColor: 'initial', '&:before': { - boxShadow: `inset 0 0 0 var(--Input-focusedThickness) ${ - theme.vars.palette[ownerState.color || 'primary']?.[500] - }`, + boxShadow: `inset 0 0 0 var(--Input-focusedThickness) var(--Input-focusedHighlight)`, }, }, }, @@ -127,7 +126,7 @@ const InputInput = styled('input', { fontSize: 'inherit', '&:-webkit-autofill': { WebkitBackgroundClip: 'text', // remove autofill background - WebkitTextFillColor: theme.vars.palette[ownerState.color || 'neutral']?.overrideTextPrimary, + WebkitTextFillColor: theme.vars.palette[ownerState.color!]?.overrideTextPrimary, }, '&::-webkit-input-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' }, '&::-moz-placeholder': { opacity: 'var(--Input-placeholderOpacity)', color: 'inherit' }, // Firefox 19+ @@ -146,7 +145,7 @@ const InputStartAdornment = styled('span', { marginRight: 'var(--Input-gap)', color: theme.vars.palette.text.tertiary, ...(ownerState.focused && { - color: theme.vars.palette[ownerState.color || 'neutral']?.[`${ownerState.variant!}Color`], + color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`], }), })); @@ -158,7 +157,7 @@ const InputEndAdornment = styled('span', { display: 'inherit', marginLeft: 'var(--Input-gap)', marginRight: 'calc(var(--Input-adornment-offset) * -1)', - color: theme.vars.palette[ownerState.color || 'neutral']?.[`${ownerState.variant!}Color`], + color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`], })); const Input = React.forwardRef(function Input(inProps, ref) { @@ -174,7 +173,7 @@ const Input = React.forwardRef(function Input(inProps, ref) { autoComplete, autoFocus, className, - color, + color = 'neutral', component, components = {}, componentsProps = {}, @@ -343,6 +342,7 @@ Input.propTypes /* remove-proptypes */ = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'neutral' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']), diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts index 6374d45a6544ef..1474896915ce9d 100644 --- a/packages/mui-joy/src/Input/InputProps.ts +++ b/packages/mui-joy/src/Input/InputProps.ts @@ -39,6 +39,7 @@ export interface InputTypeMap

{ classes?: Partial; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'neutral' */ color?: OverridableStringUnion< Exclude, diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx index 388083b2050bb3..bb860ce96d0b19 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx +++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx @@ -73,7 +73,6 @@ const ListItemButtonRoot = styled('div', { ...(ownerState.selected && { fontWeight: theme.vars.fontWeight.md, }), - '&.Mui-focusVisible': theme.focus.default, // Can't use :last-child or :first-child selector because ListItemButton can be inside ListItem with start/end action // We want to be specific on what siblings the gap should be added. [`& + .${listItemButtonClasses.root}`]: ownerState.row @@ -86,14 +85,6 @@ const ListItemButtonRoot = styled('div', { : { marginTop: 'var(--List-gap)', }, - // default color & background styles when `color` prop is not specified or set as default - ...(!ownerState.color && - !ownerState.selected && { - color: theme.vars.palette.text.secondary, - '&:hover': { - color: theme.vars.palette.text.primary, - }, - }), }, { ...(ownerState.variant === 'outlined' && { @@ -105,10 +96,11 @@ const ListItemButtonRoot = styled('div', { 'calc(var(--List-item-paddingRight) + var(--List-item-endActionWidth, var(--internal-endActionWidth, 0px)) - var(--variant-outlinedBorderWidth))', // --internal variable makes it possible to customize the actionWidth from the top List }), }, + theme.focus.default, theme.variants[ownerState.variant!]?.[ownerState.color!], - theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color || 'neutral'], - theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color || 'neutral'], - theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color || 'neutral'], + theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], + theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!], + theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!], ]); const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) { @@ -125,7 +117,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) { action, component = 'div', selected = false, - color = selected ? 'primary' : undefined, + color = selected ? 'primary' : 'neutral', variant = 'text', ...other } = props; @@ -203,6 +195,7 @@ ListItemButton.propTypes /* remove-proptypes */ = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'neutral' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['context', 'danger', 'info', 'neutral', 'primary', 'success', 'warning']), diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts index 10c1443edf8dd2..2336a47b7b031a 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts +++ b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts @@ -31,6 +31,7 @@ export interface ListItemButtonTypeMap

; /** diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx index afa2e763628813..3290a84450fff3 100644 --- a/packages/mui-joy/src/Switch/Switch.tsx +++ b/packages/mui-joy/src/Switch/Switch.tsx @@ -102,8 +102,8 @@ const SwitchRoot = styled('span', { backgroundColor: 'initial', color: 'var(--Switch-thumb-background)', border: 'none', - [`&.${switchClasses.focusVisible}`]: theme.focus.default, }, + theme.focus.default, ]; }); diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx index 8afbfdecc89704..7ac4b210ce548d 100644 --- a/packages/mui-joy/src/TextField/TextField.tsx +++ b/packages/mui-joy/src/TextField/TextField.tsx @@ -199,6 +199,7 @@ TextField.propTypes /* remove-proptypes */ = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'neutral' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']), diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index a41bf4b4b39f2a..be57f71ae193ba 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -67,6 +67,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) { const { className, component, + color, // declare to prevent type error spread to TypographyRoot gutterBottom = false, noWrap = false, level = 'body1', @@ -111,6 +112,10 @@ Typography.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, + /** + * @ignore + */ + color: PropTypes /* @typescript-to-proptypes-ignore */.any, /** * The component used for the root node. * Either a string to use a HTML element or a component. diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts index 84faff18e9d25d..ee26988fbbe7b1 100644 --- a/packages/mui-joy/src/Typography/TypographyProps.ts +++ b/packages/mui-joy/src/Typography/TypographyProps.ts @@ -1,63 +1,64 @@ import * as React from 'react'; import { OverrideProps } from '@mui/types'; import { TypographyClasses } from './typographyClasses'; -import { SxProps } from '../styles/defaultTheme'; +import { SxProps, SystemProps } from '../styles/defaultTheme'; import { TypographySystem } from '../styles/types'; export type TypographySlot = 'root'; export interface TypographyTypeMap

{ - props: P & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the text will have a bottom margin. - * @default false - */ - gutterBottom?: boolean; - /** - * Applies the theme typography styles. - * @default 'body1' - */ - level?: keyof TypographySystem | 'inherit'; - /** - * The component maps the variant prop to a range of different HTML element types. - * For instance, body1 to `

`. - * If you wish to change that mapping, you can provide your own. - * Alternatively, you can use the `component` prop. - * @default { - * h1: 'h1', - * h2: 'h2', - * h3: 'h3', - * h4: 'h4', - * h5: 'h5', - * h6: 'h6', - * body1: 'p', - * body2: 'p', - * body3: 'p', - * inherit: 'p', - * } - */ - levelMapping?: Partial>; - /** - * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. - * - * Note that text overflow can only happen with block or inline-block level elements - * (the element needs to have a width in order to overflow). - * @default false - */ - noWrap?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; + props: P & + SystemProps & { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the text will have a bottom margin. + * @default false + */ + gutterBottom?: boolean; + /** + * Applies the theme typography styles. + * @default 'body1' + */ + level?: keyof TypographySystem | 'inherit'; + /** + * The component maps the variant prop to a range of different HTML element types. + * For instance, body1 to `
`. + * If you wish to change that mapping, you can provide your own. + * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * body1: 'p', + * body2: 'p', + * body3: 'p', + * inherit: 'p', + * } + */ + levelMapping?: Partial>; + /** + * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. + * + * Note that text overflow can only happen with block or inline-block level elements + * (the element needs to have a width in order to overflow). + * @default false + */ + noWrap?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + }; defaultComponent: D; } diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx index d2240103e09fbb..60b18dbfd34bc8 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx @@ -111,11 +111,13 @@ describe('[Joy] CssVarsProvider', () => { 800: 'var(--joy-palette-neutral-800)', 900: 'var(--joy-palette-neutral-900)', textColor: 'var(--joy-palette-neutral-textColor)', + textHoverColor: 'var(--joy-palette-neutral-textHoverColor)', textHoverBg: 'var(--joy-palette-neutral-textHoverBg)', textActiveBg: 'var(--joy-palette-neutral-textActiveBg)', textDisabledColor: 'var(--joy-palette-neutral-textDisabledColor)', outlinedColor: 'var(--joy-palette-neutral-outlinedColor)', outlinedBorder: 'var(--joy-palette-neutral-outlinedBorder)', + outlinedHoverColor: 'var(--joy-palette-neutral-outlinedHoverColor)', outlinedHoverBg: 'var(--joy-palette-neutral-outlinedHoverBg)', outlinedHoverBorder: 'var(--joy-palette-neutral-outlinedHoverBorder)', outlinedActiveBg: 'var(--joy-palette-neutral-outlinedActiveBg)', @@ -123,6 +125,7 @@ describe('[Joy] CssVarsProvider', () => { outlinedDisabledBorder: 'var(--joy-palette-neutral-outlinedDisabledBorder)', lightColor: 'var(--joy-palette-neutral-lightColor)', lightBg: 'var(--joy-palette-neutral-lightBg)', + lightHoverColor: 'var(--joy-palette-neutral-lightHoverColor)', lightHoverBg: 'var(--joy-palette-neutral-lightHoverBg)', lightActiveBg: 'var(--joy-palette-neutral-lightActiveBg)', lightDisabledColor: 'var(--joy-palette-neutral-lightDisabledColor)', diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index d96079937e5b00..6991ad670f3211 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -5,6 +5,7 @@ import { Spacing, CSSObject, SxProps as SystemSxProps, + SystemProps as SystemSystemProps, unstable_createGetCssVar as systemCreateGetCssVar, } from '@mui/system'; import colors from '../colors'; @@ -119,7 +120,39 @@ export const lightColorSystem = { }, neutral: { ...colors.grey, - ...createLightModeVariantVariables('neutral'), + textColor: `var(--joy-palette-neutral-700)`, + textHoverColor: `var(--joy-palette-neutral-900)`, + textHoverBg: `var(--joy-palette-neutral-100)`, + textActiveBg: `var(--joy-palette-neutral-200)`, + textDisabledColor: `var(--joy-palette-neutral-400)`, + + outlinedColor: `var(--joy-palette-neutral-700)`, + outlinedBorder: `var(--joy-palette-neutral-200)`, + outlinedHoverColor: `var(--joy-palette-neutral-900)`, + outlinedHoverBg: `var(--joy-palette-neutral-100)`, + outlinedHoverBorder: `var(--joy-palette-neutral-300)`, + outlinedActiveBg: `var(--joy-palette-neutral-200)`, + outlinedDisabledColor: `var(--joy-palette-neutral-400)`, + outlinedDisabledBorder: `var(--joy-palette-neutral-100)`, + + lightColor: `var(--joy-palette-neutral-700)`, + lightBg: `var(--joy-palette-neutral-100)`, + lightHoverColor: `var(--joy-palette-neutral-900)`, + lightHoverBg: `var(--joy-palette-neutral-200)`, + lightActiveBg: `var(--joy-palette-neutral-300)`, + lightDisabledColor: `var(--joy-palette-neutral-500)`, + lightDisabledBg: `var(--joy-palette-neutral-50)`, + + containedColor: '#fff', + containedBg: `var(--joy-palette-neutral-700)`, + containedHoverBg: `var(--joy-palette-neutral-800)`, + containedActiveBg: `var(--joy-palette-neutral-700)`, + containedDisabledColor: `var(--joy-palette-neutral-50)`, + containedDisabledBg: `var(--joy-palette-neutral-300)`, + + overrideTextPrimary: `var(--joy-palette-neutral-700)`, + overrideTextSecondary: `var(--joy-palette-neutral-500)`, + overrideTextTertiary: `var(--joy-palette-neutral-400)`, }, danger: { ...colors.red, @@ -163,7 +196,39 @@ export const darkColorSystem = { }, neutral: { ...colors.grey, - ...createDarkModeVariantVariables('neutral'), + textColor: `var(--joy-palette-neutral-200)`, + textHoverColor: `var(--joy-palette-neutral-50)`, + textHoverBg: `var(--joy-palette-neutral-800)`, + textActiveBg: `var(--joy-palette-neutral-700)`, + textDisabledColor: `var(--joy-palette-neutral-600)`, + + outlinedColor: `var(--joy-palette-neutral-200)`, + outlinedBorder: `var(--joy-palette-neutral-700)`, + outlinedHoverColor: `var(--joy-palette-neutral-50)`, + outlinedHoverBg: `var(--joy-palette-neutral-900)`, + outlinedHoverBorder: `var(--joy-palette-neutral-600)`, + outlinedActiveBg: `var(--joy-palette-neutral-900)`, + outlinedDisabledColor: `var(--joy-palette-neutral-600)`, + outlinedDisabledBorder: `var(--joy-palette-neutral-800)`, + + lightColor: `var(--joy-palette-neutral-200)`, + lightBg: `var(--joy-palette-neutral-900)`, + lightHoverColor: `var(--joy-palette-neutral-50)`, + lightHoverBg: `var(--joy-palette-neutral-800)`, + lightActiveBg: `var(--joy-palette-neutral-700)`, + lightDisabledColor: `var(--joy-palette-neutral-600)`, + lightDisabledBg: `var(--joy-palette-neutral-900)`, + + containedColor: `#fff`, + containedBg: `var(--joy-palette-neutral-600)`, + containedHoverBg: `var(--joy-palette-neutral-700)`, + containedActiveBg: `var(--joy-palette-neutral-800)`, + containedDisabledColor: `var(--joy-palette-neutral-400)`, + containedDisabledBg: `var(--joy-palette-neutral-800)`, + + overrideTextPrimary: `var(--joy-palette-neutral-200)`, + overrideTextSecondary: `var(--joy-palette-neutral-400)`, + overrideTextTertiary: `var(--joy-palette-neutral-500)`, }, danger: { ...colors.red, @@ -274,8 +339,10 @@ const internalDefaultTheme = { }, focus: { default: { - outline: '4px solid', - outlineColor: 'var(--joy-palette-focusVisible)', + '&.Mui-focusVisible': { + outline: '4px solid', + outlineColor: 'var(--joy-palette-focusVisible)', + }, }, }, typography: { @@ -381,6 +448,8 @@ export interface JoyTheme extends ThemeScales, ColorSystem { export type SxProps = SystemSxProps; +export type SystemProps = SystemSystemProps; + const defaultTheme = internalDefaultTheme as unknown as JoyTheme; export default defaultTheme; diff --git a/packages/mui-joy/src/styles/styled.spec.tsx b/packages/mui-joy/src/styles/styled.spec.tsx index f9503485954ae8..bab5247ba422a1 100644 --- a/packages/mui-joy/src/styles/styled.spec.tsx +++ b/packages/mui-joy/src/styles/styled.spec.tsx @@ -26,9 +26,7 @@ const FocusStyle = styled('button')(({ theme }) => [ fontWeight: theme.vars.fontWeight.md, backgroundColor: theme.vars.palette.background.body, }, - { - '&:focus-visible': theme.focus.default, - }, + theme.focus.default, ]); const Variants = styled('button')(({ theme }) => [