message: docs: improve the `sx` prop docs
diff: @@ -4,16 +4,28 @@ description:
  The sx prop lets you style components inline, using your theme tokens.
  ---
  -The sx prop lets you style components inline, using your theme tokens.
  +With `sx` you can provide any valid CSS to an element and utilize tokens from
  +your theme to ensure consistency and that you are utilizing constraint-based
  +design principles when styling your application.
  +
  +This prop provides a superset of CSS (contains all CSS properties/selectors in
  +addition to custom ones) that maps values directly from the theme, depending on
  +the CSS property used. Also, it allows a simple way of defining responsive
  +values that correspond to the breakpoints defined in the theme.
  +
  +To find out which properties are theme-aware, see the
  +[Style Props](https://chakra-ui.com/docs/features/style-props).
  ## Use cases
  -Although the `sx` prop is considered an escape hatch, there are few cases where it is needed.
  +Although the `sx` prop is considered an escape hatch, there are few cases where
  +it is needed.
  ### Defining Any Standard CSS Property
  -In case you need to set a CSS property that is not listed in the [Style Props](/docs/features/style-props) list,
  -you can use the `sx` prop and pass it whatever CSS property you desire.
  +In case you need to set a CSS property that is not listed in the
  +[Style Props](/docs/features/style-props) list, you can use the `sx` prop and
  +pass it whatever CSS property you desire.
  One such example is the `filter` property:
  @@ -39,11 +51,12 @@ Custom CSS properties can be defined via the `sx` prop as well:
  ### Creating Nested Selectors
  -To create complex, nested selectors, you can use utilize the `&` operator.
  -The `&` in selector will get resolved to unique `className` that is assigned the component you put `sx` on.
  +To create complex, nested selectors, you can use utilize the `&` operator. The
  +`&` in selector will get resolved to unique `className` that is assigned the
  +component you put `sx` on.
  -> For simple examples like the following, you could just use the [`_groupHover` shorthand prop](/docs/features/style-props#pseudo).
  -> However, that way you can't create nested groups, for example.
  +> For the following example you could also use the
  +> [`_groupHover` shorthand prop](/docs/features/style-props#pseudo).
  ```jsx
  <Box borderWidth={2} borderColor="purple.500" p={5} className="my-box">
  @@ -54,8 +67,8 @@ The `&` in selector will get resolved to unique `className` that is assigned the
  color="red.500"
  sx={{
  ".my-box:hover &": {
  - color: "green.500"
  - }
  + color: "green.500",
  + },
  }}
  >
  And I will turn green!
  @@ -63,3 +76,17 @@ The `&` in selector will get resolved to unique `className` that is assigned the
  </Heading>
  </Box>
  ```
  +
  +### Custom Media queries
  +
  +```jsx
  +<Box
  + sx={{
  + "@media print": {
  + display: "none",
  + },
  + }}
  +>
  + This text won't be shown when printing this page.
  +</Box>
  +```
  