Docs-website: Change the "tip" callout component styling to look more like the old Doc site tips

[jpvajda]

This is to change the global component for tips to look closer to the Old Docs Site tip styling as that was approved and championed by Lew. So to align with his concern for how we present tips, we'll just go back that original style. The callout needs to match the existing callout as closely as possible, I'd still suggest we maintain the current color palette for consistency.

Tip Styling:

• add the full border (thick border on the left, thin border on the top, right, and bottom) and leave the rest of the component the same.
• the tip title should be the same color as the wider border line
• the tips background color should be a shade of the border line.
• ensure both light and dark mode are considered.
• ensure we apply this style to all callout variant types

New design that we need to change

[jerelmiller]

We'll need to see if we can get a dark mode style for those "old style" tips.

[jpvajda]

@jerelmiller yeah good call, perhaps @djsauble can make a recommendation, currently we just flip the background color to be a shade darker then the site background color, we could probably lighten those up to be closer to the border colors of the tips boxes. I think we can take the original tip and just add a little color to it for both modes so it has a little bit of "pop" and stands out in both modes.

[djsauble]

I wasn't in those conversations with Lew, so I don't know what exactly he cares about. However, my thinking is that we could just add the full border (thick border on the left, thin border on the top, right, and bottom) and leave the rest of the component the same.

If the callout needs to match the existing callout as closely as possible, I'd still suggest we maintain the current color palette for consistency.