reference of $$cardColor in css

[abhay187]

I was going through the Container section in the docs and found the key $$cardColor in css props and couldn't find any reference for this in docs. An example is below:-

import { Container, Card, Row, Text } from "@nextui-org/react";

export default function App() {
  return (
    <Container>
      <Card css={{ $$cardColor: '$colors$primary' }}>
        <Card.Body>
          <Row justify="center" align="center">
            <Text h6 size={15} color="white" css={{ m: 0 }}>
              NextUI gives you the best developer experience with all the features
              you need to build beautiful and modern websites and
              applications.
            </Text>
          </Row>
        </Card.Body>
      </Card>
    </Container>
  );
}

Can anyone share a reference for $$cardColor or explain?

[Xariwey]

I was going through the Container section in the docs and found the key $$cardColor in css props and couldn't find any reference for this in docs. An example is below:-

import { Container, Card, Row, Text } from "@nextui-org/react";

export default function App() {
  return (
    <Container>
      <Card css={{ $$cardColor: '$colors$primary' }}>
        <Card.Body>
          <Row justify="center" align="center">
            <Text h6 size={15} color="white" css={{ m: 0 }}>
              NextUI gives you the best developer experience with all the features
              you need to build beautiful and modern websites and
              applications.
            </Text>
          </Row>
        </Card.Body>
      </Card>
    </Container>
  );
}

Can anyone share a reference for $$cardColor or explain?

It comes from card styles inside the card component
packages/react/src/card/card.styles.ts

https://github.com/nextui-org/nextui/blob/main/packages/react/src/card/card.styles.ts

[abhay187]

Thanks actually there was no mention regarding this on documentation so was curious to know.

[Xariwey]

thats because the card component dosnt have a backgroundcolor prop like other components do, u can use css to manually set a background color or do it more fancy, overwritting the default stitchess.css like they do it on the container documentation.

now why they use a card component on the container documentation just to set out the background color i dont have idea probably its old documentation from alpha versions

[abhay187]

Maybe, by the way, any idea about when v1.0 will come out. I am about to use this for a production app.