How can an app inherit styling properties from the theme?

[blue-project]

Hi! 

I have an app under review and I have been rejected because the elements that I am adding to the store front doesn't follows the compliance:

• App blocks inherit styling properties from the theme, such as typography and colors.

Source: UX guidelines for theme app extensions

Currently I am adding a custom button into the product section. I have checked the theme documents and seems like there is no standard way to look up for typography or colors, neither how to inherit button styles from the theme.

Seems like the class names are really arbitrary, and the CSS env vars also are arbitrary depending of the theme it makes a little bit confusing how to follow this guideline. 

I don't think that in the case of a button the solution is just change the CSS to inherit color/typography, because will be tied to the container that wraps the block, and could be totally different depending of where it is placed. 

Then if we would like to find the elements from the theme options this will work only for 2.0 themes, and if, they are using the same base configuration file, because as I know, they could be highly customisable. I can't see an obvious way to solve this issue. 

I only found one potentially related post on the forum here: https://community.shopify.com/c/technical-q-a/app-blocks-theming/m-p/1284209#M63672 but with no answers yet.

I would really appreciate your help.

Thanks.

[DeJoy]

Hi, I would like to know how to do this too. Did you find a solution?

[diego-navarro]

I found a solution looking into the theme code. In the liquid files in your app block you have access to liquid objects that contains the colors and the typography. I suggest you looking into the theme.liquid file of any theme. 

For example, you can access the colors and some typographies with this: (You can find more variables in your theme code)

settings.colors_accent_1
settings.colors_accent_2
settings.colors_text
settings.colors_solid_button_labels
settings.colors_outline_button_labels
settings.colors_background_1
settings.colors_background_2
settings.type_body_font.family
settings.type_body_font.style
settings.type_header_font.weight