The Box

The Box is primarily for styling purposes. It's to add styles that aren't inherited from parents.

Values that should be controlled by a Box:

• padding -- apply to all sides or no sides
• borders -- apply to all sides or no sides, but if borders are meant to separate elements, use the owl selector to add margin-block-start in the parent to avoid overlapping borders.

Two ways to make something look like a Box:

1. border
2. background

If you change the background color and need to change the font color, you can set .box * to color: inherit, reducing the number of places where you have to override the colors.

Inverted Colors

If you're using CSS variables, you can make a .box.invert rule that sets color and background-color to their opposite values.

Example

This is a normal paragraph with a white background.

This is a paragraph with colors inverted by a CSS filter rule.

Inverting doesn't work as well when there are colors, as shown by the image examples below.

It's getting really detailed with high-contrast system themes on Windows, where the background colors might be removed. You can create a transparent outline that will only show for those visitors. (The example above has that transparent outline applied to it.)

The Component

Their web component example has the following props:

• padding — default value is "var(--s1)"
• borderWidth — default value is "var(--border-thin)"
• invert — default value is false