In order to follow the UX guidelines for theme app extensions, Shopify says that App blocks should inherit styling properties from the theme, such as typography and colors.
Is there a way to access the colors and typograhpy of the theme directly on the stylesheet of the theme app extension?
A workaround could be to style directly on the liquid file of the theme app extension, by accesing the properties such as settings.colors_background_1, but that is not a clean solution.
I think Shopify is currently providing an awful developer experience in theme app extension. There is not enough documentation, and only a few people knows the answers of the problems of the community.
I'm having the exact same problem! So far I've been able to get some similar styling in my theme app extension by inspecting the files from the theme and copying the class names of certain HTML elements, but it's not perfect.
As you mentioned, you can apply styles directly within the Liquid file of the theme app extension. While this isn't the best solution, it's a direct way to access theme settings and apply them to your app's elements. To keep things organized, you should consider using this method only for properties that need to inherit from the theme, and use external stylesheets for all other styles.