useToken 'breakpoints' not returning values

Description

When I use ‘breakpoints’ in useToken, I expect it to return a width value

Link to Reproduction

https://codesandbox.io/s/flamboyant-poincare-19xm1

Steps to reproduce

const [sm, lg] = useToken("breakpoints", ["sm", "lg"]);
const [red500] = useToken("colors", ["red.500"]);

console.log({ sm, lg, red500 });

Chakra UI Version

1.6.12

Browser

Chrome Version 95.0.4638.69 (Official Build) (x86_64)

Operating System

• macOS
• Windows
• Linux

Additional Information

Looks like this broke in this release #4867 (system@1.7.5), because its still working in #4799 (system@1.7.4)

Looking a little deeper, it looks like its caused by this change because breakpoints is not a part of __cssMap

[IHIutch]

I understand what is causing the issue, I identified that myself in my initial comment.

The useToken hook as defined is

The useToken hook retrieves whatever is in the theme at the given path(s).

This is no longer true and causes unexpected behavior. There is no mention of a tokens relationship with CSS variables.

It’s also an undocumented breaking change for anyone using breakpoints with useToken, which doesn’t throw an error.

[primos63]

Your sandbox is not going to work as you have the useToken calls before the ChakraProvider is invoked. The theme is not available at the time you’re making the call so it always returns the default value which in this case the values you requested. This is how the app should be written

import React from "react";
import ReactDOM from "react-dom";
import { Box, ChakraProvider, useToken, Text } from "@chakra-ui/react";
import { get } from "@chakra-ui/utils"
import { useTheme } from "@emotion/react";

function App() {
  const theme = useTheme()
  const [sm, lg] = ['sm', 'lg'].map(bkpt => get(theme, `breakpoints.${bkpt}`, bkpt));
  const [red500] = useToken("colors", ["red.500"]);

  return (
    <Box padding={4}>
      <Text>{sm}</Text>
      <Text>{lg}</Text>
      <Text>{red500}</Text>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  rootElement
);

It will produce the output

30em
62em
#E53E3E

The breakPoints are not in the __cssMap. I think this is because they are used by media queries so they don’t need to be css variables.