Formation: Update color-gray-dark to color-base

[jamigibbs]

Description

This update makes the base text in Formation to be $color-base instead of $color-gray-dark.

Closes department-of-veterans-affairs/vets-design-system-documentation#935

Acceptance criteria

• The base color for body and #main uses $color-base instead of $color-gray-dark.

Definition of done

• Changes have been tested in vets-website
• Changes have been tested in IE11, if applicable
• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs

[bkjohnson]

I see color-gray-dark used in other places where color-base might be more appropriate. For example:

veteran-facing-services-tools/packages/formation/sass/base/_va.scss

Lines 1317 to 1323 in 3ccc9d7

	.last-updated {
	margin-top: 1.5em;
	border-top: 2px solid $color-gray-light;
	padding: 1em 0;
	p {
	font-size: 1em !important;
	color: $color-gray-dark !important;

Can we see if some of the other uses of the color are using it because they wanted to match the base color, or because the specific gray is desired regardless of what the base is?

[jamigibbs]

@mixin button-link

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_b-mixins.scss#L159-L162

hr

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L190-L194

.va-list--feature li

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L335-L341

.card .number

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L877-L887

.va-h-ruled--stars::after

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L992-L1009

.va-note

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L1100-L1104

.last-updated

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/base/_va.scss#L1317-L1320

.fa-angle-down

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/modules/_m-additional-info.scss#L22-L28

.va-nav-linkslist-heading

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/modules/_m-nav-linkslist.scss#L21-L28

.va-sidebarnav li > div

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/modules/_m-nav-sidebar.scss#L98

.process-step

https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/modules/_m-process-list.scss#L49-L53

.va-table-list tr:nth-child(n+2)
https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/master/packages/formation/sass/modules/_m-table.scss#L82-L88

cc @humancompanion-usds

[humancompanion-usds]

Leave alone

• Button-link which is the disabled state.
• hr
• .va-list--feature li
• .card .number
• .va-h-ruled--stars::after
• .last-updated
• .fa-angle-down
• .va-nav-linkslist-heading
• .va-sidebarnav li > div
• .process-step
• .va-table-list tr:nth-child(n+2)

To be clear, I believe all of these are border colors. Only text color is changing and would need to stay in sync.

Needs more investigation

• .va-note - Where is this in use, if anywhere? This is text color and thus may need to change. I'd need to know where this is used and if it's potentially a component or paragraph style or...?

[jamigibbs]

.va-note - Where is this in use, if anywhere? This is text color and thus may need to change. I'd need to know where this is used and if it's potentially a component or paragraph style or...?

I did a search of the vets-website code for va-note and it did not return any results.

[humancompanion-usds]

If @bkjohnson concurs I would recommend removing .va-note then. I believe we can move forward with this change.

[bkjohnson]

.va-note looks good to remove - approving pre-emptively.

[jamigibbs]

@bkjohnson I'm assuming this needs a version bump, correct?

[bkjohnson]

Yeah, that's correct. Here are the instructions for how to update & publish. I believe step 4 "Create a release" doesn't work, but you can still manually create a github release.