community-group VS open-props

The initiative is open for contributions from individuals and is not owned by a specific company or organization. It is sponsored by various entities and supported by the community, including organizations like Open UI, W3C, and the Design Tokens Community Group.

Looking ahead, we aim to support native design token interoperability, aligning with the W3C community group’s ongoing standardization efforts. One of the major pieces we’re still working on is how modes and themes work within their spec. While we could launch our version now, we prefer to wait for a unified industry consensus to avoid fragmenting the space with conflicting standards.

I've done a LOT of dark mode work, to the point where I'd consider myself an expert here[1].

I'm not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It's a really a naive approach that hasn't taken into account design at scale, nor the future of where design is heading.

Typically when doing theming, you have two axes - a visual mode axis (i.e. light/dark/high contrast/colorblind modes/etc) and a theme axis (i.e. docs/sheets/slides, each with a different brand color). While this does solve an aspect of the visual mode axis, as soon as you add either a new theme or a visual accessibility mode, you'll be forced to refactor. I see that as codesmell.

I also don't think this helps support a better future of theming support. If we think about the future of theming, what we see today is a convergence of design patterns. Nearly everyone is doing theming at scale in at least roughly the same way (a semantic token layer that points to different primitive colors depending on the theme), and the differences between implementations continues to diminish over time. The convergence of patterns is a good thing - it means more code can be shared.

If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light/dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming/branding.

[1] Most recently leading Figma's dark mode stream, and currently leading their variables feature work to enable others to easily do light/dark/etc. I've consulted with 50+ enterprise tier companies on their theming. Also contributed to the W3C design token proposal for theme/mode support: https://github.com/design-tokens/community-group/issues/210. Previously worked on Jira's dark mode + a few other projects.

I had to do some reading on the actual W3 spec here, and I think I see what you're saying about compatibility with the rest of the ecosystem. Assigning a component or instance as a variable would probably be something like using an entire function as a token, which isn't one of the supported types. (Neither is Boolean though, which Figma does support, but maybe behind the scenes that's just a numeric 0 or 1?)

One item to call out though is the W3C draft support. Unfortunately we need to wait until they add a way to handle theming for tokens before we can implement it. We're working with them closely on this, and as soon as it's in the spec, we'll support it.

Discussion on github for it is here: https://github.com/design-tokens/community-group/issues/210

Hello! I don't have experience creating the tokens in Figma specifically, but there are some general best practices (erhm, let's call them suggestions, a design token standard is on its way!) you'll want to keep in mind.

This looks really good /u/MediocreAdeptness38! I think you have discovered design tokens here. There's a ton of exploration being done in this space, and many people are arriving at conclusions similar to yours. There isn't a standard (yet!), but there are a ton of best practices that go into architecting your design tokens.

There's still some boilerplate, but I'm a big fan of Open Props[0] because it takes a hybrid approach. CSS isn't necessarily reinventing the wheel, but allowing for easier / more powerful approaches to difficult layouts or things that would otherwise require JS. Bootstrap is fine but troubleshooting advanced layout issues involves a lot of inspecting elements to see what styles are actually being applied (at least in my experience, YMMV) so I'd personally always bet on CSS.

[0] https://open-props.style/

I don't quite get the hate for having CSS in another file. Do you also put all your react stuff in one single file ? That same logic and argument can be applied against all modularization.

And really 20-50 tailwind classes in a single element is VERY hard to read and keep in mind. No - it does not make things clear or understandable. One tends to need to re-read and scan over from the beginning and eyes glaze over. Esp if some elements only vary with a few classes missing. I guess it works for people with very high attention to detail and high amount of working memory. I only find it personally frustrating.

Maybe tailwind css works for some bright people. I did try it for a couple of projects and only felt pain.

However, the "atomic css" philosophy behind tailwind is great. I find framewroks like https://open-props.style/ far better to use.

Open Props adds to the set by providing extra custom properties for things like easing functions or animations.

> If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light/dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming/branding.

Isn't that the idea behind https://open-props.style/ (and https://theme-ui.com/ in JS land)?

I think it's a great idea, but hampered by the lack of adoption incentives for the very people that need to adopt it for it to become successful (design system/component library authors). It introduces constraints, but the promised interoperability is not really beneficial to the people who need to work within those constraints.

I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].

[0] https://github.com/heybokeh/pollen

[1] https://github.com/argyleink/open-props

If you choose to style with plain CSS you can add design tokens as CSS variables with Open Props: https://open-props.style.

Some time ago I discovered Open Props which provides a lot of design tokens as CSS variables and started using it in some of my projects.

CSS: Open Props (https://open-props.style/)

https://open-props.style/ gives you design tokens as CSS variables. It’s CSS only and not Svelte specific.