search

stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.73k stars 249 forks source link

Opacity Token #1102

Closed eudiegosilva closed 1 year ago

eudiegosilva commented 1 year ago

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: { ... },
}
hadihallak commented 1 year ago

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

eudiegosilva commented 1 year ago

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

hadihallak commented 1 year ago

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

om-orshee commented 1 year ago

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';