ACSS 101.07.P2: Background & Text Color (Contextual Approach + Auto Color Relationships)

[@ManolisGerakakis]

I haven't come across any other software with such power combined with such an in-depth explanation of how to use it.

[@pavelstanczuk]

An impressive approach that actually provides additional benefits. I imagine designing the website in dark light ultra and, in the final phase, selecting the appropriate colors for the best version of the design. Nice, almost like drawing with a pencil on a white sheet of paper. Good work!

How often have I missed such a feature in the last 20 years of web design. Tested straight away, worked straight away. Thank you very much, really cool!

[@snicho]

This is the first approach that I've seen to website color management that actually makes sense! Thanks to all of the ACSS team that have made this possible. Looking forward to seeing how far this concept can extend. Great job all!

[@dahunsi]

I absolutely love the new workflow. This tutorial sheds a lot of light on the colour relationships in ACSS. Well done.

[@Jim.Hummel]

Mind blown!!! The combination of Bricks with ACSS (and Frames!) is like going from a Cessna 172 to a Lancair IV-P (that's Nissan Sentra to Porsche Cayenne GTS). Thank you Kevin and Team!!

[@AutomaticCSS]

✈️

[@LupusDesign]

Truly, a creative approach for colours in ACSS. I don’t know how your thought processes developed to refine this unique concept, but its novel approach will lead to even more developments in ACSS. Thank you Kevin and Team! ❤

[@GavinDavidson]

Brilliant software! I had no clue about this setup. I've just set up a new site like this. Can't wait!!!

[@AutomaticCSS]

Have fun!

[@ReubenHochstetler]

I've started using contextual bg and text colors and this take such a load off my brain. Absolutely love it! Great concept from ACSS.

[@jugibur2117]

Really a great approach! And the new panel is just so great with this preview!

[@johnpixle]

The layer of semantic color abstraction that we all needed. Thanks a ton Kevin and team ✅

[@ikacode]

Awesome tutorial thanks ! I recently used this system on a website combined with light/dark modes. It got me thinking a lot about contrast and optimizing the use of these automatic color relationships !

[@whatznext28]

That moment when it all clicks and you can't help but crack a smile

[@AutomaticCSS]

🎉

[@davidwalls2304]

This is a great approach. I'll really need to wrap my head around this some more but I wish I knew about this for my last build in ACSS 2.8 (read some of the other comments). All kinds of great stuff coming our way!

[@eucalyptech]

Great approach, thank you Kevin 😉

[@pringletech]

If I understand you correctly, you will be expanding the relationship colors that can be set so that headlines can be contextual and independent of the already contextual text color and then links, etc. If so, that will be a wonderful addition to applying the color design style of headline/text being light/light-muted.

[@AutomaticCSS]

The headlines are already impacted along with the text. The expansion would be for links and perhaps buttons.

[@Luca-ui3rn]

incredibly good!

[@reggiewaysama]

Hi Kevin, awesome videos from part 1 to 2 btw. But I just want to clarify that this approach only applies for colors and texts right? Also with this approach other stylings should still be handled via BEM method?

[@AutomaticCSS]

Yes

[@reggiewaysama]

@@AutomaticCSS Thanks, looking forward for more ACSS 101 tutorials.

[@mr.matt.eastwood]

Love it. Is there a way to also make this affect link colours?

[@AutomaticCSS]

Soon

[@Ryanryizyiz]

Great video, does the next video 'Color Scheme & Dark Mode' not make contextual/auto color relationships redundant if using light/dark color schemes?

[@Ryanryizyiz]

No need to answer, should have tested firstly. Amazing feature, bravo!

[@philippfischer]

Great job! 🔥

[@ctmusic54]

This is epic! Game changer

[@kristapsvilcans]

This is great! Maybe need to add separate H and p colors on light/dark bg? And also accent colors on light/dark bg?

[@AutomaticCSS]

Probably - we are taking it slow since this is a concept nobody else has done yet.

[@kristapsvilcans]

@@AutomaticCSS Yes I know, but this is really awesome feature

[@kellog89]

Abstracting colors, great approach. But don't we need more than 2 darkness (or lightness) states? Dark, ultra-dark, less-dark, ... ?

[@jzajzz]

Hey Kevin .. I have a website done on the old system but my ACSS is upgraded to 3.0.7 but I still don't see Bg-Light or Bg-ultra light etc.. All I see is the old BG-base-ultra-light etc.. with the Trans 10-90 utility classes..

[@AutomaticCSS]

Ask in the community and we can help you.

[@Kal-el23]

When I right click on background it just says "background colors" and not "contextual background colors". Do I need to turn that on somewhere?

[@AutomaticCSS]

Ask in the community and provide a screen shot. We can help you there

[@Kal-el23]

@@AutomaticCSS Thanks. I was able to figure it out, I think I had to set something up in the palette first, then I saw the contextual colors.

[@jzajzz]

Is there a way to integrate Overlays in the workflow... Although they're not technically backgrounds- .. for theming and relationship purposes, It would make things seamless

[@AutomaticCSS]

We are considering contextual overlays. The challenge is they aren’t always dark, are almost never light, and are often gradient. So we might just go with .overlay as a programmable default overlay style.

[@Jim.Hummel]

@@AutomaticCSS - That's a great option that would maintain the flexibility yet offer speed.

[@AmandaLucaseu]

Really great approach 👍🏻

[@tjveach]

This is a huge change, a challenge, one has to get their head around it, it will take time…I will give it a go once 3.0 is live, in the mean time will work with Beta 3

[@AutomaticCSS]

This has been here since the 2.x series btw

[@RobCooper]

OMG! nothing more to say.