diff --git a/docs/pages/experiments/joy/style-guide.tsx b/docs/pages/experiments/joy/style-guide.tsx index 58bbecdf78a7e6..c8a974e1c6d9cd 100644 --- a/docs/pages/experiments/joy/style-guide.tsx +++ b/docs/pages/experiments/joy/style-guide.tsx @@ -9,10 +9,10 @@ import { styled, ColorPaletteProp, TypographySystem, - createGetThemeVar, + createGetCssVar, } from '@mui/joy/styles'; -const getThemeVar = createGetThemeVar(); +const getCssVar = createGetCssVar(); const rgb2hex = (rgb: string) => `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || []) @@ -26,7 +26,7 @@ const Typography = styled('p', { ({ theme, level = 'body1', color }) => [ { margin: 0 }, theme.typography[level], - color && color !== 'context' && { color: getThemeVar(`palette-${color}-textColor`) }, + color && color !== 'context' && { color: getCssVar(`palette-${color}-textColor`) }, ], ); @@ -85,12 +85,12 @@ const ColorToken = ({ name, value }: { name: string; value: string }) => { ({ - borderRadius: `calc(${theme.getThemeVar('radius-md')} / 2)`, + borderRadius: `calc(${theme.getCssVar('radius-md')} / 2)`, bgcolor: value, width: 64, height: 64, mb: 1, - boxShadow: theme.getThemeVar('shadow-sm'), + boxShadow: theme.getCssVar('shadow-sm'), })} /> {name} @@ -118,7 +118,7 @@ const PaletteTokens = () => { diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx new file mode 100644 index 00000000000000..99eaef367c53e1 --- /dev/null +++ b/docs/pages/experiments/joy/typography.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +// @ts-ignore +import { jsx as _jsx } from 'react/jsx-runtime'; +import { CssVarsProvider, styled, useColorScheme, FontSize } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Typography from '@mui/joy/Typography'; + +export const SvgIcon = styled('svg', { + shouldForwardProp: (prop) => prop !== 'fontSize' && prop !== 'sx', +})<{ + fontSize: keyof FontSize | 'inherit'; +}>(({ theme, fontSize }) => ({ + userSelect: 'none', + width: '1em', + height: '1em', + display: 'inline-block', + fill: 'currentColor', + flexShrink: 0, + ...(fontSize && { + fontSize: fontSize === 'inherit' ? 'inherit' : theme.vars.fontSize[fontSize], + }), +})); + +function createSvgIcon(path: any, displayName: any, initialProps?: any) { + const Component = (props: any, ref: any) => + ( + + {path} + + ) as unknown as typeof SvgIcon; + + // @ts-ignore + return React.memo(React.forwardRef(Component)); +} + +export const Moon = createSvgIcon( + _jsx('path', { + d: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z', + }), + 'DarkMode', +); + +export const Sun = createSvgIcon( + _jsx('path', { + d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z', + }), + 'LightMode', +); + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function JoyTypography() { + return ( + + + + + + {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'] as const).map((level) => ( + + {`${level} - typography`} + + ))} + + + ); +} diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx new file mode 100644 index 00000000000000..7119c70dceeeb8 --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.spec.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Typography from '@mui/joy/Typography'; + + + Text +; + +function Link(props: JSX.IntrinsicElements['a']) { + return ; +} + + Text +; + +// @ts-expect-error href is not exist in div + + Text +; diff --git a/packages/mui-joy/src/Typography/Typography.test.js b/packages/mui-joy/src/Typography/Typography.test.js new file mode 100644 index 00000000000000..a7d7e2907ec02f --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.test.js @@ -0,0 +1,88 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, describeConformance } from 'test/utils'; +import Typography, { typographyClasses as classes } from '@mui/joy/Typography'; +import { ThemeProvider } from '@mui/joy/styles'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes, + inheritComponent: 'p', + ThemeProvider, + render, + refInstanceof: window.HTMLParagraphElement, + muiName: 'MuiTypography', + testStateOverrides: { prop: 'level', value: 'h2', styleKey: 'h2' }, + skip: ['componentsProp', 'classesRoot', 'themeVariants'], + })); + + it('should render the text', () => { + const { container } = render(Hello); + expect(container.firstChild).to.have.text('Hello'); + }); + + it('should render body1 root by default', () => { + const { container } = render(Hello); + + expect(container.firstChild).to.have.class(classes.body1); + expect(container.firstChild).to.have.class(classes.root); + }); + + ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'].forEach((level) => { + it(`should render ${level} text`, () => { + const { container } = render(Hello); + + expect(classes).to.have.property(level); + + expect(container.firstChild).to.have.class(classes[level]); + }); + }); + + describe('headline', () => { + it('should render the mapped headline', () => { + const { getByText } = render(Hello); + + expect(getByText(/hello/i).tagName).to.equal('H6'); + }); + + it('should render a h1', () => { + const { getByText } = render(Hello); + + expect(getByText(/hello/i).tagName).to.equal('H1'); + }); + }); + + describe('prop: levelMapping', () => { + it('should work with a single value', () => { + const { getByText } = render( + + Hello + , + ); + + expect(getByText(/hello/i).tagName).to.equal('ASIDE'); + }); + + it('should work even with an empty mapping', () => { + const { getByText } = render( + + Hello + , + ); + + expect(getByText(/hello/i).tagName).to.equal('H6'); + }); + }); + + it('combines system properties with the sx prop', () => { + const { container } = render(); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + marginRight: '40px', + marginBottom: '16px', + }); + }); +}); diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx new file mode 100644 index 00000000000000..63710217dfef7c --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -0,0 +1,182 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { OverridableComponent } from '@mui/types'; +import { unstable_extendSxProp as extendSxProp } from '@mui/system'; +import { unstable_composeClasses as composeClasses } from '@mui/base'; +import { TypographyTypeMap, TypographyProps } from './TypographyProps'; +import styled from '../styles/styled'; +import useThemeProps from '../styles/useThemeProps'; +import { getTypographyUtilityClass } from './typographyClasses'; + +const useUtilityClasses = (ownerState: TypographyProps) => { + const { gutterBottom, noWrap, level } = ownerState; + + const slots = { + root: ['root', level, gutterBottom && 'gutterBottom', noWrap && 'noWrap'], + }; + + return composeClasses(slots, getTypographyUtilityClass, {}); +}; + +export const TypographyRoot = styled('span', { + name: 'MuiTypography', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + ownerState.level && styles[ownerState.level], + ownerState.noWrap && styles.noWrap, + ownerState.gutterBottom && styles.gutterBottom, + ]; + }, +})<{ ownerState: TypographyProps }>(({ theme, ownerState }) => ({ + margin: 0, + ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]), + ...(ownerState.noWrap && { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), + ...(ownerState.gutterBottom && { + marginBottom: '0.35em', + }), +})); + +const defaultVariantMapping = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6', + body1: 'p', + body2: 'p', + body3: 'p', + inherit: 'p', +}; + +const Typography = React.forwardRef(function Typography(inProps, ref) { + const themeProps = useThemeProps({ + props: inProps, + name: 'MuiTypography', + }); + + const props = extendSxProp(themeProps); + + const { + className, + component, + gutterBottom = false, + noWrap = false, + level = 'body1', + levelMapping = {}, + ...other + } = props; + + const ownerState = { + ...props, + level, + className, + component, + gutterBottom, + noWrap, + }; + + const Component = component || levelMapping[level] || defaultVariantMapping[level] || 'span'; + + const classes = useUtilityClasses(ownerState); + + return ( + + ); +}) as OverridableComponent; + +Typography.propTypes /* remove-proptypes */ = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * If `true`, the text will have a bottom margin. + * @default false + */ + gutterBottom: PropTypes.bool, + /** + * Applies the theme typography styles. + * @default 'body1' + */ + level: PropTypes.oneOf([ + 'body1', + 'body2', + 'body3', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + '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: PropTypes.shape({ + body1: PropTypes.string, + body2: PropTypes.string, + body3: PropTypes.string, + h1: PropTypes.string, + h2: PropTypes.string, + h3: PropTypes.string, + h4: PropTypes.string, + h5: PropTypes.string, + h6: PropTypes.string, + inherit: PropTypes.string, + }), + /** + * 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: PropTypes.bool, +} as any; + +export default Typography; diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts new file mode 100644 index 00000000000000..abda52a0692c7a --- /dev/null +++ b/packages/mui-joy/src/Typography/TypographyProps.ts @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { OverrideProps } from '@mui/types'; +import { TypographyClasses } from './typographyClasses'; +import { SxProps } from '../styles/defaultTheme'; +import { TypographySystem } from '../styles/types'; + +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; + }; + defaultComponent: D; +} + +export type TypographyProps< + D extends React.ElementType = TypographyTypeMap['defaultComponent'], + P = { + component?: React.ElementType; + }, +> = OverrideProps, D>; diff --git a/packages/mui-joy/src/Typography/index.ts b/packages/mui-joy/src/Typography/index.ts new file mode 100644 index 00000000000000..bbaa51027683f6 --- /dev/null +++ b/packages/mui-joy/src/Typography/index.ts @@ -0,0 +1,4 @@ +export { default } from './Typography'; +export * from './TypographyProps'; +export { default as typographyClasses } from './typographyClasses'; +export * from './typographyClasses'; diff --git a/packages/mui-joy/src/Typography/typographyClasses.ts b/packages/mui-joy/src/Typography/typographyClasses.ts new file mode 100644 index 00000000000000..11f5136de17c3d --- /dev/null +++ b/packages/mui-joy/src/Typography/typographyClasses.ts @@ -0,0 +1,51 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/base'; + +export interface TypographyClasses { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if `level="h1"`. */ + h1: string; + /** Styles applied to the root element if `level="h2"`. */ + h2: string; + /** Styles applied to the root element if `level="h3"`. */ + h3: string; + /** Styles applied to the root element if `level="h4"`. */ + h4: string; + /** Styles applied to the root element if `level="h5"`. */ + h5: string; + /** Styles applied to the root element if `level="h6"`. */ + h6: string; + /** Styles applied to the root element if `level="body1"`. */ + body1: string; + /** Styles applied to the root element if `level="body2"`. */ + body2: string; + /** Styles applied to the root element if `level="body3"`. */ + body3: string; + /** Styles applied to the root element if `nowrap={true}`. */ + noWrap: string; + /** Styles applied to the root element if `gutterBottom={true}`. */ + gutterBottom: string; +} + +export type TypographyClassKey = keyof TypographyClasses; + +export function getTypographyUtilityClass(slot: string): string { + return generateUtilityClass('MuiTypography', slot); +} + +const typographyClasses: TypographyClasses = generateUtilityClasses('MuiTypography', [ + 'root', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'body1', + 'body2', + 'body3', + 'noWrap', + 'gutterBottom', +]); + +export default typographyClasses; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 7072cb249343de..bc5c8e5d092e9d 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -4,5 +4,8 @@ export * from './styles'; export { default as Button } from './Button'; export * from './Button'; +export { default as Typography } from './Typography'; +export * from './Typography'; + export { default as Switch } from './Switch'; export * from './Switch'; diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 8b99e4df0b5de0..3b99bf1fbf0b92 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -67,7 +67,10 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV }, prefix: 'joy', shouldSkipGeneratingVar: (keys) => - keys[0] === 'typography' || keys[0] === 'variants' || keys[0] === 'focus', + keys[0] === 'typography' || + keys[0] === 'variants' || + keys[0] === 'focus' || + keys[0] === 'breakpoints', }); export { CssVarsProvider, useColorScheme, getInitColorSchemeScript }; diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 56dc156a7b30f6..a7fb1fb11ab100 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -5,7 +5,7 @@ import { Spacing, CSSObject, SxProps as SystemSxProps, - unstable_createGetThemeVar as systemCreateGetThemeVar, + unstable_createGetCssVar as systemCreateGetCssVar, } from '@mui/system'; import colors from '../colors'; import { @@ -399,7 +399,7 @@ type Vars = ThemeScales & ColorSystem; export type ThemeVar = NormalizeVars; -export const createGetThemeVar = (prefix = 'joy') => systemCreateGetThemeVar(prefix); +export const createGetCssVar = (prefix = 'joy') => systemCreateGetCssVar(prefix); export interface JoyTheme extends ThemeScales, @@ -411,7 +411,7 @@ export interface JoyTheme; + getCssVar: ReturnType; } export type SxProps = SystemSxProps; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index c1dc0275b20168..5525fec764e0d5 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -12,7 +12,7 @@ import getInitColorSchemeScript, { DEFAULT_MODE_STORAGE_KEY, } from './getInitColorSchemeScript'; import useCurrentColorScheme from './useCurrentColorScheme'; -import createGetThemeVar from './createGetThemeVar'; +import createGetCssVar from './createGetCssVar'; export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'; @@ -122,7 +122,7 @@ export default function createCssVarsProvider(options) { breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints, - getThemeVar: createGetThemeVar(prefix), + getCssVar: createGetCssVar(prefix), }; const styleSheet = {}; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index 108d620b075aa3..9f10e0c3536b25 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -95,7 +95,7 @@ describe('createCssVarsProvider', () => { expect(screen.getByTestId('text').textContent).to.equal('var(--mui-fontSize)'); }); - it('provide getThemeVar util', () => { + it('provide getCssVar util', () => { const { CssVarsProvider } = createCssVarsProvider({ theme: { colorSchemes: { light: { palette: { primary: { 500: '#ff5252' } } } }, @@ -105,7 +105,7 @@ describe('createCssVarsProvider', () => { }); const Text = () => { const theme = useTheme(); - return
{theme.getThemeVar('palette-primary-500')}
; + return
{theme.getCssVar('palette-primary-500')}
; }; render( diff --git a/packages/mui-system/src/cssVars/createGetThemeVar.test.ts b/packages/mui-system/src/cssVars/createGetCssVar.test.ts similarity index 84% rename from packages/mui-system/src/cssVars/createGetThemeVar.test.ts rename to packages/mui-system/src/cssVars/createGetCssVar.test.ts index fb321ea546d37d..451221a165d201 100644 --- a/packages/mui-system/src/cssVars/createGetThemeVar.test.ts +++ b/packages/mui-system/src/cssVars/createGetCssVar.test.ts @@ -1,9 +1,9 @@ import { expect } from 'chai'; -import createGetThemeVar from './createGetThemeVar'; +import createGetCssVar from './createGetCssVar'; -describe('createGetThemeVar', () => { +describe('createGetCssVar', () => { describe('default without prefix', () => { - const getThemeVar = createGetThemeVar(); + const getThemeVar = createGetCssVar(); it('should return correct CSS var with default prefix', () => { expect(getThemeVar('palette-primary-500')).to.equal('var(--palette-primary-500)'); }); @@ -28,7 +28,7 @@ describe('createGetThemeVar', () => { }); it('able to custom prefix', () => { - const getThemeVar = createGetThemeVar('custom'); + const getThemeVar = createGetCssVar('custom'); expect(getThemeVar('shadow-xs')).to.equal('var(--custom-shadow-xs)'); }); }); diff --git a/packages/mui-system/src/cssVars/createGetCssVar.ts b/packages/mui-system/src/cssVars/createGetCssVar.ts new file mode 100644 index 00000000000000..1d27fd61082f07 --- /dev/null +++ b/packages/mui-system/src/cssVars/createGetCssVar.ts @@ -0,0 +1,21 @@ +/** + * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable + * and they does not need to remember the prefix (defined once). + */ +export default function createGetCssVar(prefix: string = '') { + function appendVar(...vars: string[]): string { + if (!vars.length) { + return ''; + } + return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; + } + + // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error. + const getCssVar = ( + field: T | AdditionalVars, + ...vars: (T | AdditionalVars)[] + ) => { + return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`; + }; + return getCssVar; +} diff --git a/packages/mui-system/src/cssVars/createGetThemeVar.ts b/packages/mui-system/src/cssVars/createGetThemeVar.ts deleted file mode 100644 index 564b4a326edefb..00000000000000 --- a/packages/mui-system/src/cssVars/createGetThemeVar.ts +++ /dev/null @@ -1,16 +0,0 @@ -export default function createGetThemeVar(prefix: string = '') { - function appendVar(...vars: string[]): string { - if (!vars.length) { - return ''; - } - return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; - } - - const getThemeVar = ( - field: T | AdditionalVars, - ...vars: (T | AdditionalVars)[] - ) => { - return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`; - }; - return getThemeVar; -} diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 5d95adc0ea7aa7..cf804500e25cea 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -161,5 +161,5 @@ export { default as ThemeProvider } from './ThemeProvider'; export * from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars'; -export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar'; +export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar'; export * from './cssVars'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index d1ca5cdf37e1bb..dcc7c985775884 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -46,4 +46,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider'; -export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar'; +export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar'; diff --git a/test/utils/describeConformance.js b/test/utils/describeConformance.js index d0efa0cd65fb79..d57d63f204330a 100644 --- a/test/utils/describeConformance.js +++ b/test/utils/describeConformance.js @@ -208,7 +208,7 @@ export function testReactTestRenderer(element) { * @property {(node: React.ReactElement) => import('./createRenderer').MuiRenderResult} [render] - Should be a return value from createRenderer * @property {Array} [only] - If specified only run the tests listed * @property {any} refInstanceof - `ref` will be an instanceof this constructor. - * @property {Array} [skip] - Skip the specified tests + * @property {Array} [skip] - Skip the specified tests * @property {string} [testComponentsRootPropWith] - The host component that should be rendered instead. * @property {{ slotName: string, slotClassName: string } | Array<{ slotName: string, slotClassName: string }>} [testDeepOverrides] * @property {{ prop?: string, value?: any, styleKey: string }} [testStateOverrides]