Description

Closes #1590
Preview link: Getting started for developers - Phase 2

Problem

From the related issue: "The settings file example in docs would generate a warning for insufficient contrast, if the warnings hadn't been disabled. Since it's typical for people getting started to copy/paste examples, it would be better to have an initial file that didn't disable warnings and had contrasting colors."

Solution

Updated the example compile settings in Phase 2 of the Getting Started for Developers guide to include values that compile without warnings.

Testing

To test, open a sample project and use the current code sample from our docs but turn $theme-show-compile-warnings to true. Note the compile warnings.

@use "uswds-core" with (
  $theme-image-path: "../uswds/img",
  $theme-show-compile-warnings: true,
  $theme-color-primary-lightest: "green-warm-10",
  $theme-color-primary-lighter: "green-warm-20",
  $theme-color-primary-light: "green-warm-30",
  $theme-color-primary: "green-warm-50",
  $theme-color-primary-vivid: "green-warm-50v",
  $theme-color-primary-dark: "green-warm-60v",
  $theme-color-primary-darker: "green-warm-70v",
  $theme-color-primary-darkest: "green-warm-80",
  $theme-banner-background-color: "ink",
  $theme-banner-link-color: "primary-light",
  $theme-banner-max-width: "none",
)

Then compile using the updated code sample. You should receive no compile warnings or errors.

@use "uswds-core" with (
  $theme-image-path: "../uswds/img",
  $theme-show-compile-warnings: true,
  $theme-show-compile-warnings: false,
  $theme-banner-background-color: "ink",
  $theme-banner-link-color: "primary-light",
  $theme-banner-max-width: "none",
)

Additional information

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.