New Colors Questions

boston85719 · 2025-01-11T10:53:02.222Z

Monthly Community Update -- January 2025

Default styles: We’re updating default design styles for brand-new apps to include a fuller palette of color variables. This should make it easier to create beautiful, on-brand apps right out of the gate. That release is scheduled for later this month.

@fede.bubble

I know this might be pre-announcement by Bubble but the monthly update spoke to the expectation of this new color sets and it is already available so I assume we may not get an official announcement post.

I’m curious if Bubble can offer some insight to these questions.

What is the reason for not providing descriptions for these new defaults?
What is the rational behind the use of these colors in the form of primary_10, primary_20…is this supposed to align with Google Material Design Color where a bubble primary_10 would be Google Material Design Primary 100?
What are the principles used for crafting these new colors in regards to changes to the HSL values of the primary versions (ie: destructive base is changed to create destructive_10 etc)…or are they programmatically created using Google Material Design?
Will they implement colors into the Optimize Application function so that we can remove unused colors?

thomas.mey · 2025-01-14T12:07:36.422Z

Yeah not sure about their color naming convention.
10 seems to be an equivalent to a 50 of material/tailwind.
80 seems to be an equivalent of a 900.

Again a Bubble way of doing things

Anyway, i’m working on some tools integrated with my extension Elemium,
One for Clean up unused color variables, another to generate 50-950 tailwind palettes, and another to improve a bit this color variables picker.

I will release that in Beta in a few days, would love to have your feedback.

bF3o2IVxNSRU4rEv@2x1528×1600 213 KB

boston85719 · 2025-01-14T15:06:45.865Z

thomas.mey:

One for Clean up unused color variables

Awesome. One of those strange oversights that happens in Bubble, it is so big and complex, probably a huge task just to try and keep up with understanding impacts of new features and areas of pre-existing features that need to be updated to accommodate.

thomas.mey:

another to generate 50-950 tailwind palettes

Sounds good. Definitely will be helpful for lots of users.

thomas.mey:

10 seems to be an equivalent to a 50 of material/tailwind.
80 seems to be an equivalent of a 900.

I’ve seen it in apps built by other agencies, so I think bubble might have picked it up there, or it is some design system I’m not aware of (which is likely as all I really know of is Bootstrapped and Google Material Design). At a certain point it feels like an overkill to have so many colors, but they can all serve a purpose. I’m more curious why they would not have just taken a more tested approach like Google Material Design.