Comment by jjcm

Comment by jjcm a day ago

This is a great overview of the pros/cons of this. For those creating just a simple site, this is a solid easy way to have proper contrast.

For those making anything at a production scale where you need wcag compliance however, I'd avoid this and leverage a proper semantic token layer. Semantic tokens will help both accelerate your dev cycle, and they'll help guarantee proper contrast ratios in a way that looks visually better than just switching your foreground layer to black or white. The great thing about a semantic token layer is they're extremely easy to theme, which means you get light/dark theming for very little additional cost. You can also create separate WCAG2 / APCA accessible themes, should your brand color be one of the ones that WCAG2 has issues with - will get you compliance while still providing a better visual contrast option.

This is kind of my niche domain specialty - I run the variables/tokens stream at Figma, and I've worked on the dark mode implentation for both Figma and Atlassian. Happy to answer any questions about tokens/themes/accessible color.

charrondev a day ago

What do you mean by semantic tokens?

This exact type of functionality has caused a major project a work on to use CSS in JS (for relative colors and contrast colors.

I’m glad to see this type of thing coming around the corner and look forward to it being widely available in a couple years.

Reply View 5 replies

jjcm a day ago

With regards to color on the web, semantic tokens refer to css variables that are named in a way that describes their use, ie:
* bg-brand (this would be used whenever you need your brand color as a background)
* text-danger (likely a red text color)
* icon-warning-hover (likely a dark yellow-orange that's slightly different from icon-warning)
Generally speaking, there are three "levels" of tokens: primitive, semantic, and component. Primitive tokens describe the value. In the case of color, this might be a color ramp. IE red/100, red/200, red/300. Semantic tokens reference primitive tokens. IE bg-brand might have its value set to blue/300. This layer is sometimes called a "reference" layer because of this, but I'm not a fan of that nomenclature since the component layer also references the semantic layer. The component layer is one that describes where in a component the token should be used, ie button-bg or button-text. I highly, HIGHLY recommend against using a component layer though in all but the most extreme multi-brand situation. If you aren't unilever, you should never use component tokens.

Reply View | 4 replies
- ZYbCRq22HbJ2y7 a day ago
  
  Aren't there many, many schemes for naming tokens in design systems? Aren't you being a bit forward in presenting this as a general practice?
  https://medium.com/eightshapes-llc/naming-tokens-in-design-s...
  
  Reply View | 2 replies
  
  jjcm 4 hours ago
  
  Nathan is talking about naming schemes within each tier I mentioned, not different tiers. That blog is detailing naming schemes for the semantic and component layer.
  The primitive/semantic/component set of tiers are a general practice. Naming within them heavily differs (and should!). The names you use for the individual tokens depend on goals and intent - ie Google’s material’s semantic layer uses a naming schema that’s designed for colorful variety of themes (albeit at the expense of clarity of how they should be used), whereas Apple uses a far more simplified naming schema since the design of their apps has far fewer design differences.
  
  Reply View | 0 replies
  
  ryanwhitney a day ago
  
  Not parent, but the generalization is true. There’s usually a base layer (red/300, etc) and a more semantic layer (.text-danger).
  As your link covers, there’s then a million different ways to implement/extend that based on whatever theming and systems you’re implementing on top.
  
  Reply View | 0 replies
- recroad a day ago
  
  This only works if you don’t let users theme your site. If you do, then OPs approach works better.
  
  Reply View | 0 replies

hk1337 20 hours ago

I don’t disagree, in fact I absolutely agree but the last 2/3 just sounds like meaningless jibber jabber to make yourself look smart. I’m not saying it’s not true but it’s word vomit.

I like the feature but in a corporate site/application, you don’t want to rely on this function because you cannot control what the result is going to be. For all I know, WebKit could fix some later bug or change something that changes the result color to something that I don’t want.

Reply View 1 reply

throwaway290 17 hours ago

If you don't understand something it doesn't always make that a word vomit:)

Reply View | 0 replies