ARC-144 normalize stylesheets

[rshiggin]

Summary

• Refactors and normalizes SCSS usage across multiple stylesheets.
• Extracts button styles from _base.scss into a new _buttons.scss partial.
• Standardizes color variable naming and usage in SCSS.

Important!

• Dependencies from :root values in umich-lib.css use one syntax: var(--color-neutral-100
• New colors added directly into .scss in development use another syntax: colors.$facet-gray

House style umich-lib.css

• Necessary for branding in header & footer
• Base or :root values for colors, spacing, typography
• Called via CDN: cdn.jsdelivr.net/npm/@umich-lib/web@1.3.0/umich-lib.css

[rshiggin]

@ssciolla There are a couple of typography variables that rely on the design system. To keep the pattern we're using intact, I propose renaming the colors.scss file to variables.scss and calling this file with @use "variables" as var; (in place of @use "colors" as colors;.

Sample

@use "bootstrap-context" as bs;
@use "variables" as var;

.btn:focus,
.btn-group > .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 2px **var.$color-maize-400,**
  0 0 0 3px **var.$color-neutral-400;**
  border-radius: 2px !important;
}

.btn {
  outline: 0;
  display: inline-block;
  border: none;
  font-weight: 700;
  font-size: 1em;
  font-family: **var.$font-base-family, sans-serif;**
  border-radius: **var.$radius-default;**
  text-decoration: none;
}

This keeps us from adding a new file type.scss and a new line @use "type" as type; in the head of each .scss file. And it will be more extensible if we want to integrate other non-color variables from the design system's :root defaults.