[Joy] Export CssVarsProvider with default theme #29150
Conversation
| @@ -0,0 +1,268 @@ | |||
| const colors = { | |||
There was a problem hiding this comment.
Copied from tailwindcss to get started with some default colors.
| ? { theme?: PartialDeep<Theme> } | ||
| ? { theme?: Theme } | ||
| : { | ||
| theme: PartialDeep<Omit<Theme, 'colorSchemes'>> & { | ||
| colorSchemes: PartialDeep< |
There was a problem hiding this comment.
Remove PartialDeep here because it breaks function type. It is better to let DesignSystem handle the Theme type.
| RequiredDeep< | ||
| Record<ApplicationColorScheme, Theme['colorSchemes'][ApplicationColorScheme]> | ||
| >; |
There was a problem hiding this comment.
use RequiredDeep to make sure that all of the key:value for ApplicationColorScheme must be specified.
| DesignSystemThemeInput extends { | ||
| colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>; | ||
| }, | ||
| DesignSystemColorScheme extends string, | ||
| ApplicationColorScheme extends string = never, | ||
| ApplicationThemeInput extends { | ||
| colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>; | ||
| } = DesignSystemThemeInput, |
There was a problem hiding this comment.
Split into DesignSystemThemeInput and ApplicationThemeInput to handle types separately.
| | number | ||
| >, | ||
| string | ||
| expectedStyle: Partial< |
There was a problem hiding this comment.
In testfile.test.tsx, without Partial, the matcher expect all of CSSStyleDeclaration
siriwatknp
force-pushed
the
joy/css-vars-provider
branch
from
8c94779
to
ef574b4
Compare
siriwatknp
changed the title
There was a problem hiding this comment.
I didn't really understand the need for the useTheme option in createStyled. Could you elaborate more on it. Especially as with it we are adding wrappers around each styled component. This means that we are diverging from how it is implemented in both emotion/styled-components.
Co-authored-by: Benny Joo <sldisek783@gmail.com>
|
It broke the CI, it seems to be always failing when the test run on Firefox
|
| expect(screen.getByTestId('palette').textContent).to.equal( | ||
| JSON.stringify({ | ||
| brand: { | ||
| 50: 'var(--joy-palette-brand-50)', |
There was a problem hiding this comment.
Does it mean that the Material Design CSS variable will be?
| 50: 'var(--joy-palette-brand-50)', | |
| 50: 'var(--md-palette-brand-50)', |
There was a problem hiding this comment.
yes, developer will be able to custom the prefix.
| @@ -38,15 +38,28 @@ | |||
| "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" | |||
| }, | |||
| "peerDependencies": { | |||
| "@emotion/react": "^11.4.1", | |||
There was a problem hiding this comment.
It might be safer to use the same version as Material Design:
| "@emotion/react": "^11.4.1", | |
| "@emotion/react": "^11.5.0", |
| @@ -0,0 +1,141 @@ | |||
| import * as React from 'react'; | |||
| import colors from '../colors'; | |||
|
|
|||
There was a problem hiding this comment.
Should we leave a TODO?
| // TODO extend import { createTheme, ThemeOptions, Theme } from '@mui/system'; | |
oliviertassinari
changed the title
danilo-leal
changed the title
This is the first PR for defining Joy's theme structure. It is necessary before building components.
The theme structure is based on the github discussion #29024.
Necessary APIs for building components are exported from
mui-joy/src/stylessimilar to material. All the types of the theme structure is defined inmui-joy/src/styles/defaultTheme.tsCssVarsProviderThemeProviderstyledSome properties are not included yet (will add in other PR when it is needed).