Bootstrap does calculations with SCSS variables in its own SCSS files (e.g., $padding-x * .75); this only works when $padding-x is a value other than a CSS variable, as Dart SASS can’t do that calculation when $padding-x is a CSS variable (throws an error).
Using calc and SCSS interpolation, we can get around the problem for now if we manually copy/duplicate the affected Bootstrap SCSS files into the Paragon codebase and no longer import from the Bootstrap file directly, so we have full control over it.
We are on latest v4 of Bootstrap, and don’t imagine Bootstrap will have another v4 release (since v5 is latest).
Is copying Bootstrap’s SCSS into our codebase to get around the issue with calc a viable solution?
What values are driving the widths of standard modal sizes? (sm, md, lg, xl). We don’t have these available in Figma today and I plan to add them. The sizes seem to have custom values. Should it correspond to Container or Responsive or some other size value that is already defined in Paragon?