How to apply global theming to custom modules in Design Manager Preview?

[bearons]

Hi all, 

I am struggling to understand how I am supposed to access global theming variables (i.e. font family, styling, sizing, line-height, etc.) while I am developing custom modules. I have seen posts that suggest that you can't actually do this and that to test, you must place your custom module into the Page editor. Yet, even while testing this way I am receiving incorrect styling. 

Take this code for example: 

My global theme is set to use the 'Acumin Pro' font. The intention of this particular module is to display a number using the same font style as the h1 font set in my global theme settings. I've tried this using css classes but find that I am repeating classes across modules, so am trying `require_css`. This is attempting to use variables from theme-overrides.css, though I have also tried directly {{theme.text.font}} or actually using the h1 tag instead of p, which I thought to try custom styling elsewhere. All of this is to no avail:

The failed attempt

The correct output

So, how can I access this global styling? From a classic web development point of view, I could simply import a shared stylesheet. HubSpot seems to do away with this, much to my confusion. 

Regards,

-b

[evaldas · Accepted solution]

Hi @bearons,

It ultimately depends on how you have your fields.json set up, but assuming you are building off of the HubSpot boilerplate, in order to access the styling that is set in your theme settings, you would need to use syntax that looks something like this:

.STLnums {
  {% theme.text.h1.font.style %};
  color: {% theme.text.h1.font.color %};
  font-size: {{ theme.text.h1.font.size ~ theme.text.h1.font.size_unit }};
  text-transform: {{ theme.text.h1.transform }}
}

This should give you:

.STLnums {
  font-weight: 700; text-decoration: none; font-family: 'Acumin Pro', serif; font-style: normal;
  color: #05e335;
  font-size: 50px;
  text-transform: none;
}

Below is an example from fields.json from the boilerplate to better illustrate the hierarchy:

  {
    "label": "Text",
    "name": "text",
    "type": "group",
    "children": [
      {
        "label": "Heading one (H1)",
        "name": "h1",
        "type": "group",
        "children": [
          {
            "label": "Font",
            "name": "font",
            "type": "font",
            "inherited_value": {
              "property_value_paths": {
                "color": "theme.global_fonts.secondary.color",
                "fallback": "theme.global_fonts.secondary.fallback",
                "font": "theme.global_fonts.secondary.font",
                "font_set": "theme.global_fonts.secondary.font_set"
              }
            },
            "default": {
              "size": 50,
              "size_unit": "px",
              "styles": {
                "text-decoration": "none"
              },
              "variant": "700"
            }
          },
          {
            "label": "Transform",
            "name": "transform",
            "type": "choice",
            "choices": [
              ["none", "None"],
              ["capitalize", "Capitalize"],
              ["uppercase", "Uppercase"],
              ["lowercase", "Lowercase"]
            ],
            "display": "select",
            "default": "none"
          }
        ]
      }
    ]
  }

You may notice that the h1 is set to be whatever is set in the "secondary" font of the "Global Fonts". If you wish to use the primary font for your h1 in the module, then you can utilize it directly:

.STLnums {
 font-family: '{{ theme.global_fonts.primary.font }}';
}

Hope this helps!

[bearons]

Thanks for your response @evaldas ! Sadly, it appears that this did not work for me. I do know that the theme I am using initially was created with the HubSpot boilerplate but has since been extended quite a bit. 

Could you point me towards documentation on how I might access theme variables if I am not using strictly the boilerplate template? I see that theme-overrides.css exists and see all these variables set there, but have yet to successfully see any kind of success in using those variables. I must be referencing it incorrectly but am not sure where!

Again, appreciate your reply. 

[evaldas]

@bearons while fields.json is the ultimate "source of truth", you can sometimes use the theme-overrides.css to find the appropriate references to the fields you are trying to get values from.

Since variables can be set at the developer's discretion, there isn't really a straighforward/fool-proof way to access them. However, most commonly the variables are set at the top of the "theme-overrides.css" file.

For example, in the boilerplate, the variables for h1 styling look like this:

{% set h1_font = theme.text.h1.font %}
{% set h1_text_transform = theme.text.h1.transform %}

Which then later gets referenced as:

h1,
.h1 {
  {{ h1_font.style }};
  color: {{ h1_font.color }};
  font-size: {{ h1_font.size ~ h1_font.size_unit }};
  text-transform: {{ h1_text_transform }};
}

So in this case:

h1_font is the same as theme.text.h1.font

which means:

h1_font.style is the same as theme.text.h1.font.style

because the variable "h1_font" has been set as "theme.text.h1.font"

Since you are trying to access this in a module, it might be better for you to not use the variable you see in the theme-overrides.css (in this case it would be "h1_font") but instead find what the variable is set to and use that instead (i.e. "theme.text.h1.font") - because as far as I know the CSS files do not share variables with HTML files.

[bearons]

Thanks again for your reply. I'm wondering if I am making a mistake in how I am attempting to reference the values from the theme. Thanks for your advice, I did discover something happening in this example. Using a similar but different example module:

I followed your advice to discover the corresponding values in my theme's fields.json:

And when I attempt to access the color property, I actually do see it render in the design preview, as you can see the hex code here:

Yet when I reference the same exact theme variables from fields.json in my module.css, I am met with a blank/null value. You can see that in the browswer dev tools here:

I did rediscover the Themes Overview developer documentation but this suggests referencing these values in the same way you are suggesting, so I'm a bit at a loss.

Any thoughts here?

[evaldas]

The screenshots definitely help. I see you are trying to use HubL in your "module.css" - which will not work.

While HubL can be used in a separate CSS file, in a module you can only use HubL in the HTML section (css and js sections will not render HubL). 

That being said, you can still utilize it trough "require_css" in the HTML portion of the module - you would add:

{% require_css %}
<style>
 .STLlinks {
   color: {{theme.text.links.font.color}};
 }
</style>
{% end_require_css %}