iiinova — where your digital self keeps evolving

Ooooh, didn’t know! Going to use this for borders in design systems. A lot more understandable for consumers to than color-mix.

110

Reposted by Jacob Berglund

Keith Cirkel @keithamus.social · 19/09/2026

I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!

keithcirkel.co.uk

Custom Attributes polyfill

79723

Jacob Berglund @jacobberglund.com · 20/09/2026

Oh, I like this. Sometimes it feels really awkward to have to wrap web components around elements just to do basically this. This feels more laser and less shotgun.

030

Jacob Berglund @jacobberglund.com · 20/09/2026

Thanks! And right back at you. I’ve been recommending sugarcubes left and right lately.

111

Jacob Berglund @jacobberglund.com · 18/09/2026

Best parts: varde.variant.dev/docs/referen... - The best buttons I ever made. Heavy usage of color-mix. varde.variant.dev/docs/example... - This one show composition of a whole view + color-mode as smaller things varde.variant.dev/docs/example... - Showcases color-mode quite nicely.

varde.variant.dev

Buttons

000

Jacob Berglund @jacobberglund.com · 18/09/2026

Ayyyy! Just released 1.0 of my take on an opinionated CSS framework. varde.variant.dev/docs/ Look, I love packages, but isn't it something magical about just referring to a CSS file? To get fonts, colors and utilities. It's probably not a design system, but it certainly is the foundation of one.

varde.variant.dev

Varde

262

Jacob Berglund @jacobberglund.com · 15/09/2026

Jeeeez! Wow, that site is positively amazing! 🤩

010

Reposted by Jacob Berglund

David Aerne @meodai.bsky.social · 15/09/2026

After testing 100s of imgs comparing tiny and big changes to the algo: I am now confident to present to you: The new okpalette.color.pizza. Powerful as before, ~40% faster, better at detecting good presets and much better at finding rare colors! Test it with your pics and let me know what you think

71059

Jacob Berglund @jacobberglund.com · 12/09/2026

I feel like I've stumbled upon something close to magic in regards to how I want to build design system in the future. This feels like 4x2 and 2x2 LEGO. Not the overly specific ones like a green banana. Colors need not be handpicked in Figma. Color systems will be building blocks instead. kthx!

010

Jacob Berglund @jacobberglund.com · 12/09/2026

You could still use triads, complementary and so on because the a neutral also has a hue. Unless it's totally void of saturation of course, but that ain' no fun!

000

Jacob Berglund @jacobberglund.com · 12/09/2026

I feel like that would be the hardest part :D Though I've found that using a neutral palette with just a smidge of color in combination with a saturated accent does wonders. In other words: keep saturation low so that when you want some it doesn't have to compete.

100

Jacob Berglund @jacobberglund.com · 12/09/2026

And add a pinch of JS to switch stuff and you'd get patters such as this (JS required is <color-mode palette="yellow">)

000

Jacob Berglund @jacobberglund.com · 12/09/2026

So here's them buttons inheriting palette and inverted color-mode like champs. Oh, and dark mode. Useful or not is yet to be determined!

000

Jacob Berglund @jacobberglund.com · 12/09/2026

Patterns starts to emerge. The middle one is inverted and has a shadow. The classes inside remains the same, subtle is still subtle. Button is still button, though it went from an outlined button to a filled one. Button inherits color from the inverted tokens. 🤯

000

Jacob Berglund @jacobberglund.com · 12/09/2026

There's actually two semantic layers. A "normal" one and an inverted one. Here's a demonstration of two <color-modes>, the inner one inherits from the first. Both can be inverted independent of each other.

000

Jacob Berglund @jacobberglund.com · 12/09/2026

A continuation of my <color-mode> rambling yesterday. OKLCH take the wheel! If a palette is something to be changed and inherited, we could extend with a semantic layer too. And what happens next is positively fascinating. Allow me to demonstrate 🧵

510

Jacob Berglund @jacobberglund.com · 12/09/2026

Yes, definitely in the same vein! Love it! I like the ”here’s some knobs, you figure it out!” approach. Here’s my take: jberglund.github.io/nyans/

jberglund.github.io

Nyans — A color palette generator based on OKLCH

Create beautiful, accessible color palettes powered by OKLCH color space.

110

Reposted by Jacob Berglund

Web Standards @web-standards.dev · 11/09/2026

Make your logo brighter than white. Chris Bennett built a tool that turns a logo into a gain-map JPEG, so the colors you pick shine up to 7.5 times brighter than plain white on HDR screens and stay a normal JPEG everywhere else. #color #image www.soverybright.com/

1175

Jacob Berglund @jacobberglund.com · 12/09/2026

And if :hover is needed, you just increase the opaqueness, preferably as a custom property. 🧑‍🍳

000

Jacob Berglund @jacobberglund.com · 12/09/2026

This opens up borders to be a semantic, regardless of what background it rest on. Subtle or strong is a matter of how much alpha. Sure, it technically becomes different colors based on the background, but I believe it to be an OK trade off. Ugly example from a test bench:

000

Jacob Berglund @jacobberglund.com · 12/09/2026

I’m starting to think that colors set in hex (or the like) is akin to magic numbers. Relative colors and color-mix() unlocks a whole bunch new patterns. Example: Borders colors should be relative to backgrounds. Add alpha to it instead of specific hex values.

210

Jacob Berglund @jacobberglund.com · 11/09/2026

Love it! Recently used microlighter (+ a modified version of Codejar) for a presentation. No buildstep. Just wrooom inside an .html file.

020

Jacob Berglund @jacobberglund.com · 11/09/2026

Here are 2 different color-modes. Grey and blue. Both as inverted and non-inverted, in dark mode. Light mode would look different. What a time to be alive!

040

Jacob Berglund @jacobberglund.com · 11/09/2026

Sounds like madness, but really it’s just OKLCH being an absolute top dog. Making it easy to swap out palettes left and right.

130

Jacob Berglund @jacobberglund.com · 11/09/2026

It has a few semantic class names for text color and surfaces. These change color depending on the palette chosen in <color-mode>. In other words: color is inherited. Same goes for backgrounds. And why stop there? Also did ”inverted”, which flips it all. In essence a doubling of potential!

100

Jacob Berglund @jacobberglund.com · 11/09/2026

Been hard at work to create an opinionated CSS framework. Best thing in it is what I dubbed <color-mode>. It sets a a color palette and everything inherits from it. The possibilities it opens for composing is positively bonkers. Got 4 different button variants, but color is not an axis. 🧵

2133

Reposted by Jacob Berglund

Lea Verou, PhD @lea.verou.me · 06/08/2026

🔥 New blog post: Dark mode toggles that expose three states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/da... PS: As a data point, @jakearchibald.com was converted after reading this 😅

lea.verou.me

Dark mode toggles: two states are enough • Lea Verou

Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards...

3118935

Jacob Berglund @jacobberglund.com · 20/05/2026

How do you do ”default” link styling without interfering if there’s other classes being added to it? Like it looking like a button for example :not([class]) is too much smartness.

020

Jacob Berglund @jacobberglund.com · 03/03/2026

Sorry if I’m late to the party, but it occurred to me that cascade layers can be used to show the most important CSS at the top. Like a button with variants. I want the variants up top and not the base. Without cascade layers this requires smartness™. Nice.

000

Jacob Berglund @jacobberglund.com · 26/02/2026

It makes some assumptions: It posts on blur with a custom header (X-Enhance-Validate). You gotta for that header that, do the validation and not doTheThings(). Make sure you return the same form with a 422 status code. And that's pretty much it. Hey-o!

020

Jacob Berglund @jacobberglund.com · 26/02/2026

Made a web component to progressively enhance good ol' SSR forms. Introducing <enhance-form>! You wrap a form with it and you'll get inline form validation with minimal effort. Heavily inspired by Unpoly 😍

github.com

GitHub - jberglund/enhance-form: A web component to progressively enhance HTML forms

A web component to progressively enhance HTML forms - jberglund/enhance-form

121

Jacob Berglund @jacobberglund.com · 26/02/2026

Just reading the description and I'm like "omg yes plez and thank you!". I'm deep in progressive enhancement territory at this point and I do not want to go full shadow DOM. Something like this would slot right in, assuming my interpretation of the description is correct 😅

010

Jacob Berglund @jacobberglund.com · 24/02/2026

Laughed out loud on the bus thanks to this! Much appreciated 😂

010

Jacob Berglund @jacobberglund.com · 24/02/2026

I’m done with Spotify. It just doesn’t feel like the app I used to love.

000

Reposted by Jacob Berglund

Rebane @rebane2001.bsky.social · 24/02/2026

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS lyra.horse/x86css/

1322610856

Jacob Berglund @jacobberglund.com · 20/02/2026

130 files changed, 125 insertions(+), 8115 deletions(-) Today was a gooood day. 🪓 Shoutout to knip.dev!

000

Reposted by Jacob Berglund

Florian Schepp @scheppening.com · 16/02/2026

Just shipped bsky-comments! Embed Bluesky threads anywhere with a zero-dependency Web Component. • Framework Agnostic (Native WC) • < 3kb gzipped • Zero Config: Just paste the Post URL • Light DOM: Fully customizable (CSS/Tailwind) github.com/florianschep... #webdev #opensource #buildinpublic

318032

Jacob Berglund @jacobberglund.com · 19/02/2026

Like, you update a variable and the input changes?

100

Jacob Berglund @jacobberglund.com · 17/02/2026

Made a customizable-face-looking-at-the-cursor thing. Try it out: varianter.github.io/fjes/ Feedback is welcomed 😊

020

Jacob Berglund @jacobberglund.com · 14/02/2026

Ha! It never struck me that an input without a name doesn’t get serialized in a form. Makes sense now though 😂 Imma yoink that. I feel like this is WKs fault for not allowing us to extend elements. Kind of have to implement the basics all over.

000

Jacob Berglund @jacobberglund.com · 14/02/2026

Hat off though. It is humbling to get a glimpse of how much effort goes into these things. 🙏

010

Jacob Berglund @jacobberglund.com · 14/02/2026

Oh my, this is nicely documented. The remark answered my question 😅 github.com/microsoft/fl...

github.com

110

Jacob Berglund @jacobberglund.com · 14/02/2026

Oh, that is interesting. Does it stay out of forms when slotted?

100

Jacob Berglund @jacobberglund.com · 14/02/2026

Probably works crappy on mobile devices. It is an attempt at making a pattern which isn’t necessarily a combobox, but could be used as such. The pattern being the point. If you have any feedback or point me to where I could read up on the things you mentioned, I’d really appreciate it 🙏

110

Jacob Berglund @jacobberglund.com · 14/02/2026

Yarr! I was thinking about this the other day and experimented a bit using the text input inside shadow dom and requiring ARIAs in the light DOM for correctness. codepen.io/jacobberglun...

codepen.io

Progressively enhanced combobox

...

110

Jacob Berglund @jacobberglund.com · 13/02/2026

The excitement is knowing there is an non-zero chance of death or other injuries. And upon reading the obituary: ”yep, that’ll do it”

010