fix(styles): restore use of globals/imports.scss

[andy-blum]

Description

the carbon reset has all items box-sizing set to inherit. this changes that to border box and is intended mainly to see what shifts in Percy

[netlify]

✅ Deploy Preview for ibm-dotcom-web-components-react-wrap ready!

Name	Link
🔨 Latest commit	1a89143
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-dotcom-web-components-react-wrap/deploys/67630c6e31aacc0008c43f68
😎 Deploy Preview	https://deploy-preview-12175--ibm-dotcom-web-components-react-wrap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ibm-dotcom-web-components ready!

Name	Link
🔨 Latest commit	1a89143
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-dotcom-web-components/deploys/67630c6e5b86750008623e4a
😎 Deploy Preview	https://deploy-preview-12175--ibm-dotcom-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andy-blum]

This did nothing.

[andy-blum]

The components most impacted in the percy review:

Locale Modal

Component fails grid alignment in both cases.

Before:

After:

Expressive Modal

Component fails grid alignment in both cases.

Before:

After:

Card Section Simple

Component fails grid alignment in both cases.

Before:

After:

Quote

Component is improved by this PR

Before:

After:

Link List Section

Component is improved by this PR

Before:

After:

[areagan1030]

• Locale modal – it appears that the internal spacing is correct, but the outer container is shifting in how it sits on the grid on md to max (sm is as expected). I don't see v2 Figma specs, but I'm looking at v1 and the modal is not sitting on the grid in a normal way here either. So, storybook preview does actually align with the v1 Figma layout.
• Expressive modal – same as above. The v1 Figma is looking closer to insetting the modal 4 cols on lg to max, and md is somewhat off grid. While the storybook preview is also off grid, these are both a little wonky in different ways.
• Card Section Simple – the leftmost alignment of the cards is looking okay (I'm assuming borders might be set to outside, which makes this look shifted 1px left – but text alignment is correct). It appears that the card width and the spacing between cards is off. This is dependent on whether the section should be using the default or narrow grid mode. If default, card edges align on the grid left and right (4 cols) with 2rem between. If condensed, left edge hangs 1rem in gutter and right edge is on grid with 1rem between cards. I assume default may be the preferred for CIBM here, but worth noting that we're not using default grid in AEM (generally has been condensed or narrow).
• Quote – For md to max, the text should be aligning on the grid line with the quote hanging to the gutter at left. Design specs show quote hanging 1 rem to left. It also appears that the rule at the bottom of the component is hanging 1rem into gutter left and right. So this aligns with the quote mark at left. And the rule in storybook preview looks like it's stopping short on the right side.
• Link list section – This one seems to be matching the design specs. In AEM, we had been following the narrow grid standards previously with the horizontal rule, but it appears this doesn't hang in the gutter in v2 now. The storybook preview seems to have the correct grid alignment.

[areagan1030]

Chatted with @andy-blum — we are good with everything here today, with the caveat that Card Section will get a little more tweaking for its grid.