smooth-ui should accept xstyled theme specification for text

[siva3378]

🐛 smooth-ui should accept xstyled theme specification for text

Default <Text> 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 of theme.text
• When the colorMode is dark <Text> component should get color of theme.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

[siva3378]

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>
  );
}