1

I'm using the USWDS_base theme as a base for my custom theme. Version 8.x-2.10

In this file: web/themes/custom/my_child_theme/sass/_uswds-theme-utilities.scss I find the tokens used for the breakpoints (see screenshot).

In the comments, I can see what size those tokens represent. I can't find anywhere where those numbers are set so that I can override them. I've been combing through the theme for hours. Can anyone point me in the right direction?

Edit:

I found this file, where the calculations are being made.

web/themes/custom/my_child_theme/node_modules/uswds/dist/scss/core/_system-tokens.scss

I've brought the specific variables affecting breakpoints out of node_modules and into my custom styles .scss file, but the calculation values I changed don't seem to affect the tokens.

I feel like I'm so close...

Breakpoints

Improve this question
2
  • Doing a grep -r "1200px" easily showed me all the files 1200px appears in. It's declared in the _data/tokens/spacing.yml file.
    – No Sssweat
    Jun 20, 2021 at 11:49
  • Unfortunately, searching for 1200 doesn't help here. It's more complex than grepping. This theme does not contain a data or tokens folder and spacing.yml doesn't exist. In fact, the tokens are set via a calculation in the file I mention in my question. I'm very grateful you posted this comment, though. It's the first anyone has had to say about hiere. Thanks! I've been consulting with some colleagues who also ran into the same problem and they gave up eventually. The couldn't find a way to change the token value and resorted to hard-coding a value.
    – LeraA
    Jun 21, 2021 at 13:18

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.