CSS

Gloss makes use of PostCSS and postcss-preset-env to compile modern CSS into browser compatible CSS.

Breakpoints

Typography

See the layout documentation to learn more about Gloss’s responsive type scale CSS classes.

Spacing

See the layout documentation to learn more about Gloss’s responsive spacing CSS classes.

Color

We encourage you to modify Gloss to fit your needs, and sometimes that means adjusting the colors. We’ve included tints in Gloss to make it easier to adjust colors in a way that’s consistent with other Gloss applications and with University of Utah Health’s brand guidelines.

Tints are colors mixed with different degrees of white. They offer flexibility and a greater range of color to draw attention to or indicate actions. (You’ll notice that we tint our secondary buttons to indicate a hover state, for example.)

• Do use tints as accents in your custom components
• Do make sure that color combinations meet WCAG 2.0 standards for contrast ratio. Use this tool to check combinations for compliance.
• Do use tints sparingly
• Don’t use tints to replace colors of existing components

Grayscale

Primary

Secondary

Info

Success

Warning

Danger

Shadows

--global-small-box-shadow:    0 1px 1px rgba(0,0,0,0.09), 0 2px 2px rgba(0,0,0,0.1);
--global-medium-box-shadow:   0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.09), 0 4px 4px rgba(0,0,0,0.1);
--global-large-box-shadow:    0 1px 1px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.09), 0 8px 8px rgba(0,0,0,0.1);
--global-xlarge-box-shadow:   0 1px 1px rgba(0,0,0,0.06), 0 2px 2px rgba(0,0,0,0.07), 0 4px 4px rgba(0,0,0,0.08), 0 8px 8px rgba(0,0,0,0.09), 0 16px 16px rgba(0,0,0,0.1);