Css/Variables Example has Legacy octal literals, which aren't allowed in typescript strict mode

[Sboonny]

Subject

CSS Variables

Description

While trying to add Variables in my project as shown in the example, I got this error

Error: SyntaxError: unknown: Legacy octal literals are not allowed in strict mode

Here is the live page

---

Changing the example to string like this, fixed the type and it works without issues so far.

const theme = {
  fontSizes: {
    lg: '18px',
  },
  colors: {
    gray: {
      '100': '#fafafa',
      '200': '#f7f7f7',
    },
  },
}

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[nikolovlazar]

@Sboonny can you provide a reproduction example?

[Sboonny]

Sure, in this sandbox below I have created ./themes file, which hold the variables in it.

https://codesandbox.io/s/exciting-wiles-sw6os6?file=/src/index.tsx

Following the example shown in the docs will lead to the error as shown in the image

---

side note: In the example, I failed to link exampleTheme to ChakriaProvider, but I don't think this change it, because in the main repo, we have the theme connected without issue, but we were having trouble following the example, until quotes were added

[nikolovlazar]

You've got the following:

00: "#ffffff",
05: "#f5f6f7",

The 00 and 05 are the reason why you're seeing this error. Ordinary numbers should not have leading zeroes. Adding a leading zero in this case turns the number into an octal number, which is not allowed in strict mode. If you want to define your own keys, turn 00 into 0 and 05 into 5.