Introducing Global Styles Variables – App Font

Hello everyone! I’m excited to announce the launch of a new core part of styles– global style variables. The Styles tab will now include two subtabs – one to edit element styles as before, and one to edit style variables.

The first style variable we’ve introduced is a global App Font, which you can use as the font family in any element style across your app. This enables you to make changes to font across multiple elements using the App Font variable, without having to change font families in every instance that they’re used.

In new apps, default styles will be preset to the App Font. In existing apps, you can edit the font family to use App Font in individual element appearance settings or in Element Styles in the Styles tab.

We hope this allows you to prototype, build, and edit your apps more quickly!


39 Likes

Thanks, @manasi! These little features make development a little bit faster! :blush:

3 Likes

Superb!
I tried with Roboto flex, a Google font from the drop down.
It’s working fine.
Thank you!

Fantastic upgrade. Definitely going to save us a lot of time on new projects when creating the style guide.

Thanks @Bubble

Thanks
ZubairLK

This is very very useful. :+1: :+1: :+1: Removes a tedious 20 minutes out of every project from now on. :slight_smile:

Thanks much! This has lots of potential. I’m eager to see how it evolves.

  • Will this always be a set of predefined app-wide (global) styles?
  • Will we at some point be able to define our own arbitrary app-wide styles?

For instance, I’d love to create several colors - like brand colors (primary, secondary, etc.) - that will be used throughout the app, so that they could be updated app-wide from a single location. Will that be possible at some point, @manasi?

9 Likes

1000% agree - app wide colors are going to be fantastic.

2 Likes

awesome, cant wait for app wide gaps, margins, padding, group type, standard min width, shadows, borders, transitions etc and making these copy pasteable across apps!

9 Likes

Awesome! :rocket:
Hopefully primary and secondary colors will come next 🫶

2 Likes

Awesome Bubble!

Echoing @sudsy, being able to define our own style variables has got to be the goal.

Having the equivalent of something like Figma’s colour styles feature would be epic. That tiny app-wide colour palette just doesn’t cut it!

2 Likes

Could always use some wild option sets, but I agree!

Yeah I have tried that, but you cant get a style to pull in dynamic data. So you’re forced to either not use a style at all, or override it using some hacky conditional.

Needs to be native!

@TipLister Major point! I’ve developed quite a few MVPs for people and this would be lovely. Copy and pasting between apps right now is not very fun…

thanks for liking.

Maybe bubble does not notice but agencies, freelancers and youtube influencers are the major free marketing machine you have.

you make my life easier, i stay with you and learn less xano/real code etc.

you save me lotsa time building, i have more time and money to market.

too few features so far are geared at power users. I have still not been invited to a user interview because of being a power user. i dont really care if i am selected to be honest, but if 5 of my fulltime bubble dev friends have also not been invited it makes me think you are not really doing your job!!

each of us would have very similar points i am sure but maybe one day we switch to another tool.

id buy bubble equity too since 3 years, but no offer, and you risk my retention.

edit: thanks bubble for inviting me to be a beta tester.

2 Likes

Love this addition. Very useful.

I am encountering a bug though. I’m not able to access the Repeating Group styles in the styles panel to make changes. Can anyone confirm this?

Thank you!

Yes, thanks for the feedback! App-wide colors are in the works and user generated style variables are definitely on the docket for making styles more usable and accessible.

3 Likes

Same here. When I select a repeating group in the style editor, it reverts back to the last element that I selected, not a repeating group.

1 Like

You should be able to select repeating group styles just like any other styles. Please do submit a bug report if this consistently isn’t the case. Thanks!

They sent out an email asking if people would like to join their Beta testers program. You should reach out to support to request an email to join it. Get early access to new features to test and provide feedback.

But yes, I hear you on the point.

@manasi Any chance to get a little more on this feature? Would be great to get to set maybe more than just one? Maybe make it more like App text in that we can create as many as we find we need, or maybe just hard set it to 2 or 3 possible choices?

There are sometimes in my app design I have two or three font families I use throughout the app and would love to make use of the feature on all font families that are used in the app.

2 Likes