smooth-ui should accept xstyled theme specification for text
siva3378 opened this issue Β· comments
Siva Kumar commented
π smooth-ui should accept xstyled theme specification for text
Default component's color should take value from the theme object. All the variants should also inherit the "text" color from theme object and then overrides its own variant color
To Reproduce
Steps to reproduce the behaviour:
Add text key as per xstyled theme specification here: https://xstyled.dev/docs/color-modes/
const theme = {
colorMode: "dark",
colors: {
text: "red", // in light mode : text color should be red
background: "#fff",
primary: "green",
modes: {
dark: {
text: "yellow", // in dark mode : text color should be yellow
background: "#000",
primary: "blue"
}
}
}
};
export default function App() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Box>
<Text variant="h1">Heading 1 text</Text>
<Text>Default text</Text>
<br />
<br />
<Button>Test button</Button>
</Box>
</ThemeProvider>
</div>
);
}
Expected behaviour
- When the colorMode is
light
<Text>
component should get color oftheme.text
- When the colorMode is
dark
<Text>
component should get color oftheme.modes.dark.text
Link to reproduction
https://codesandbox.io/s/smooth-ui-theme-should-respect-xstyled-specifications-wlwzb
Paste the results here:
Dark mode
Light mode
Siva Kumar commented
I found a way to deal with this at the moment by providing colour prop to the Text component and managing that colour in the theme. For example color="primary"
.
export default function App() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Box>
<Text variant="h1">Heading 1 text</Text>
<Text color="primary">Default text</Text> /* text color gets switched as per mode*/
<br />
<br />
<Button>Test button</Button>
</Box>
</ThemeProvider>
</div>
);
}