Opacity Token

[Diego Silva]

Would it be interesting to support opacity tokens to standardize design systems? something like that:

theme: {
  // lineHeights: { ... },
  opacities: {
    'opacity-transparent': 0,
    'opacity-translucent': 0.5,
    'opacity-opaque': 1,
  },
  // radii: { ... },
}

[Abdul]

Hey @diegosilvatech 👋
This is already possible without any changes to Stitches:
https://codesandbox.io/s/opacity-scale-lh19xx?file=/src/App.js

Let me know if you have any other questions

[Diego Silva]

this is amazing @hadihallak. I hadn't tested it like that. Thanks!

[Abdul]

You're very welcome! glad this solved the issue for you.

[om-orshee]

I'm getting : 'DefaultThemeMap' only refers to a type, but is being used as a value here.ts(2693)
when i tried :
themeMap: { ...DefaultThemeMap, opacity: 'opacities' },
theme: {...

after importing it like :
import { createStitches, DefaultThemeMap } from '@stitches/react';