Summary

Fixed a bug that prevented $theme-card-padding-y from accepting expected token values.

Breaking change

This is not a breaking change.

Related issue

Closes #5515

Related pull requests

Changelog PR

Preview link

Card component

Problem statement

When setting custom values for $theme-card-padding-y, some values that the system says are acceptable cause an error.

For example: $theme-card-padding-y: 15 results in the following error:

Error: "`7.5` is not a valid `padding` token. You should correct this. Standard `padding` tokens:  1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, 0"
   ╷
25 │     padding-#{$side}: get-uswds-value("padding", $value...) #{$important};
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  packages/uswds-core/src/styles/mixins/utilities/_padding.scss 25:23  padding-n()
  packages/uswds-core/src/styles/mixins/utilities/_padding.scss 50:3   u-padding-bottom()
  packages/usa-card/src/styles/_usa-card.scss 81:3                     @forward
  usa-card/src/_index.scss 4:1                                         @forward
  packages/uswds/_index.scss 20:1                                      @forward
  src/stylesheets/uswds.scss 3:1                                       root stylesheet 

This problem occurs because the u-padding mixins accept only known unit tokens. The current calculations perform division on the setting value before running it through the mixin, which means that the mixins are not always receiving acceptable unit values. For example, when $theme-card-padding-y is defined with 15, the mixin receives the value of 7.5, which is not a mapped unit value.

Solution

When the padding value must be divided, we should not use u-padding mixins and instead directly define the CSS padding property.

Testing and review

1. Confirm that the $theme-card-padding-y setting accepts all listed padding token values without error: 1px, 2px, 05, 1, 105, 2, 205, 3, 4, 5, 6, 7, 8, 9, 10, 15, 0.
2. Confirm that all math performed on $theme-card-padding-y are not used in mixins.
3. Confirm that the setting updates the visual presentation as expected.
4. Confirm that there are no visual regressions.