css-library: core imports #1359

micahchiang · 2024-10-08T17:33:07Z

Chromatic

https://mc-update-css-library-core-stylesheet--65a6e2ed2314f7b8f98609d8.chromatic.com

Configuring this pull request

Link to any related issues in the description so they can be cross-referenced.
Add the appropriate version patch label (major, minor, patch, or ignore-for-release).
- See How to choose a version number for guidance.
- Use ignore-for-release if files haven't been changed in a component library package. (ie. only Storybook files)
DST Only: Increment the /packages/core version number if this will be the last PR merged before a release.
Complete all sections below.
Delete this section once complete

Description

This work updates css-library/stylesheets/core.scss with the necessary changes to make things work in vets-website

Formation Deprecation - Core import swap vets-design-system-documentation#3397

QA Checklist

Component maintains 1:1 parity with design mocks
Text is consistent with what's been provided in the mocks
Component behaves as expected across breakpoints
Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
Designer has signed off on changes (if applicable. If not applicable provide reason why)
Tab order and focus state work as expected
Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
New components are covered by e2e tests; updates to existing components are covered by existing test suite
Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

QA checklist has been completed
Screenshots have been attached that cover desktop and mobile screens

Definition of done

Documentation has been updated, if applicable
A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

Signed-off-by: Micah Chiang <[email protected]>

micahchiang

Leaving comments on changes here as I make them

micahchiang · 2024-10-08T18:07:52Z

packages/css-library/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.12.2",
+  "version": "0.12.2-rc2",


I'll update this whenever this PR is ready to be merged.

micahchiang · 2024-10-08T18:11:34Z

packages/css-library/src/stylesheets/core.scss

+@import 'base/fonts';
+@import 'base/utils';


fonts is needed because it's the entry point for uswds-fonts, which contains all of the font-face settings for source sans pro web. Prior to this, even though we were using uswds-typography settings, it seems like our imports for fonts in vets-website were still relying on formation/core.

utils is needed because it contains at least one style rule, va-button-link that is actively being used in vets-website, but we should definitely look to deprecate this moving forward.

micahchiang · 2024-10-08T18:13:10Z

packages/css-library/tokens/fonts.json

+      "sans": { "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif" },
      "serif": { "value": "Bitter, Georgia, Cambria, 'Times New Roman', Times, serif" }
    },
    "serif": { "value": "Bitter, Georgia, Cambria, 'Times New Roman', Times, serif" },
    "source": {
-      "sans": { "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"}
+      "sans": { "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"}


our utility classes needed to be updated with the newly imported base/fonts because of the uswds rename to Source Sans Pro Web. Without this addition the utility class vads-u-font-family--sans will render a serif font due to not finding the right font-face.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-08T20:10:00Z

packages/css-library/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.12.2",
+  "version": "0.12.2-rc6",


I'll update this with a proper version when its ready

micahchiang · 2024-10-08T20:10:51Z

packages/css-library/src/stylesheets/core.scss

+@import 'base/va';
+@import 'base/fonts';
+@import 'base/utils';


Moved these higher because we likely want any formation override stylesheets to take precedent

micahchiang · 2024-10-08T20:13:32Z

packages/css-library/src/stylesheets/formation-overrides/elements/typography.scss

@@ -87,7 +87,6 @@ h6 {
  font-family: tok.$font-family-serif;
  line-height: vars.$heading-line-height;
  margin-bottom: 0.5em;
-  margin-top: 1.5em;


Removed this because it usually ends up being overridden in applications anyway.

In general, we should move to remove this file completely and instead use base/headings.scss because that uses uswds heading styles. The main thing in this rule that is still needed in vets-website is the margin-bottom rule, which several applications expect by default.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-08T22:50:29Z

packages/css-library/src/stylesheets/base/va.scss

@@ -106,7 +106,7 @@ a {
 }

 // ====== Headings
-@import 'headings';
+// @import 'headings';


I'm temporarily removing this because it contains v3 heading styles which are colliding with Formation heading styles when attempting to swap core imports in vets-website.

headings.scss imports uswds v3 usa-headings-styles, which includes some things we may or may not want. For example, this typeset-heading that adds margin top with a universal selector, and uses theme paragraph margin settings.

I attempted to reconcile these with the existing heading styles, but felt like I was beginning to change too many things at once.

We definitely want to get rid of the stuff in the formation-overrides folder, but we need a more systematic approach for this.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-09T22:03:39Z

packages/css-library/src/stylesheets/_mixins.scss

+$focus-outline: 2px solid $vads-color-action-focus-on-light;
+$focus-spacing: 2px;


This fixes focus outline for anchor tags that are not contained in one of our web components. A lot of these anchor tags tend to live on hub pages somewhere. This mirrors the web components mixin.

Eventually, we'll want to probably have css-library be the source of truth for mixins, and instead inherit web-component mixins from there.

micahchiang · 2024-10-09T22:06:18Z

packages/css-library/src/stylesheets/base/va.scss

@@ -348,6 +355,7 @@ article > h1 {
  max-width: $lead-max-width;

  p, a {
+    font-family: $font-serif;


va-introtext p is used on a bunch of different hub pages. Without explicitly setting font-family to $font-serif these paragraphs will render source sans pro instead of bitter which is how they're currently rendered. This is because our uswds-typography stylesheet will override font-family.

micahchiang · 2024-10-09T22:09:00Z

packages/css-library/src/stylesheets/base/va.scss

+      font-size: 12px;
      padding-left: scale-rem(1.5rem);
+      p {
+        font-size: 12px;
+      }


Changes to these styles are needed to maintain parity with what's currently in production. Leaving font-size out here will render text to 16px.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-10T20:04:00Z

packages/css-library/src/stylesheets/base/va.scss

+h1 {
+  margin-top: 0;
+}
+


needed for home page and hub pages mostly

micahchiang · 2024-10-10T20:05:25Z

packages/css-library/src/stylesheets/base/va.scss

+// Used on content-build hub pages and a couple of places in vets-website
+.va-h-ruled--stars {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &::before {
+    margin-right: scale-rem(12rem);
+  }
+
+  &::before,
+  &::after {
+    border-top: 1px solid $color-gray-light;
+    content: " ";
+    flex: 1 1 50%;
+    padding: scale-rule(1rem 0);
+  }
+
+  background: url('#{$image-path}/stars.png') no-repeat center;
+  background-size: scale-rule(11rem auto);
+  margin: scale-rule(1.6rem auto auto);
+  padding: scale-rule(2rem 0 0);
+  text-align: center;
+
+  @include media($medium-screen) {
+    padding-left: 0;
+  }
+}
+// used mostly in content-build, we should consider moving this over there 
+.last-updated {
+  margin-top: 1.5em;
+  border-top: 2px solid $color-gray-light;
+  padding: 1em 0;
+  p {
+    color: $color-gray-dark !important;
+  }


These render the spacers on static hub pages that include the stars png. Without them an empty space is rendered instead.

The last-updated class renders the top border. Without it and empty space is rendered instead.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-10T20:16:56Z

packages/css-library/src/stylesheets/formation-overrides/components/_forms.scss

+// This actually seems to be how things were before. 
+// Leaving a comment here so it gets flagged in the PR.


Specifically calling this out because it renders a larger margin top than what's currently on va.gov, but I think this is actually correct and more akin to what was formerly on va.gov before we began our work to scale everything for root font-size migration.

The original rule is here and it uses the scale-rule function we created. However, it turns out that currently throws an error in production dev tools and falls back to a reduced margin:

Contrast the above with the margin-top rule correctly resolving when testing locally with the css-library/core file:

I tried confirming this with wayback machine...but uh they got ddos'd today.

I was able to load this is archive.gov now for a date last year and you're right that there was originally more margin but it still looks different than your second screenshot.

The calculated value is 26.8px from that time.

I think if we remove scale-rule and convert 3rem to 1.875rem, it will be correct.

Ah nice, yeah I wasn't 100 percent sure what the correct margin was. Thanks for confirming.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-10-11T17:41:39Z

packages/css-library/src/stylesheets/modules/m-emergency-banner.scss

@@ -17,7 +17,7 @@
    }

    .usa-alert-heading {
-      font-family: "Source Sans Pro";
+      font-family: $font-family-sans;


This file is already importing the variables file, and $font-farmily-sans contains the updated Source Sans Pro Web naming convention. Renaming this fixes rendered font.

micahchiang · 2024-10-11T17:41:44Z

packages/css-library/src/stylesheets/modules/m-maintenance-banner.scss

@@ -17,7 +17,7 @@
    }

    .usa-alert-heading {
-      font-family: "Source Sans Pro";
+      font-family: $font-family-sans;


This file is already importing the variables file, and $font-farmily-sans contains the updated Source Sans Pro Web naming convention. Renaming this fixes rendered font.

micahchiang · 2024-10-11T17:41:49Z

packages/css-library/src/stylesheets/modules/m-megamenu.scss

@@ -103,7 +103,7 @@ $marketing-container-height: 380px;
      h3 {
        display: block;
        color: $vads-color-black;
-        font-family: Source Sans Pro, sans serif;
+        font-family: $font-family-sans;


This file is already importing the variables file, and $font-farmily-sans contains the updated Source Sans Pro Web naming convention. Renaming this fixes rendered font.

micahchiang · 2024-10-11T17:41:56Z

packages/css-library/src/stylesheets/modules/m-megamenu.scss

@@ -260,7 +260,7 @@ $marketing-container-height: 380px;

    .vetnav-panel--submenu:not([hidden]) {
      h3 {
-        font-family: Source Sans Pro, sans serif;
+        font-family: $font-family-sans;


This file is already importing the variables file, and $font-farmily-sans contains the updated Source Sans Pro Web naming convention. Renaming this fixes rendered font.

jamigibbs · 2024-10-23T21:20:50Z

packages/css-library/src/stylesheets/core.scss

 @use './mixins' as *;

 //============ VENDOR PARTIALS ==============//
 @import 'lib/normalize';

+// Grid/columns classes
+@import "./formation-overrides/foundation-sites";


This should handle being a bridge for the Foundation imports being imported into Formation's core stylesheet here since these classes are still widely used in vets-website. Thank you to Kerry for getting them out of the Foundation package! 🙇🏼‍♀️

Signed-off-by: Micah Chiang <[email protected]>

… to css" This reverts commit 8c953cb.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-11-11T22:40:20Z

packages/css-library/src/stylesheets/formation-overrides/components/_forms.scss

@@ -11,11 +11,12 @@
 @use '../../override-function' as *;
 @use '../../mixins' as fm;

-$usa-form-width: scale-rem(32rem);
-
+$usa-form-width: 32rem;


I think this value might have been updated unnecessarily. In formation, $usa-form-width is overridden in this stylesheet, which is imported after all other imported stylesheets that involve form width.

Here's a diff between local and staging that illustrates the side effect:

And here's a diff with the scale-rem rule removed:

Signed-off-by: Micah Chiang <[email protected]>

micahchiang · 2024-11-11T23:34:29Z

packages/css-library/src/stylesheets/formation-overrides/_foundation-sites.scss

We had the below override styles in formation, and they seem to align more with what's currently in production for forms. So bringing those over instead.

Signed-off-by: Micah Chiang <[email protected]>

micahchiang added 3 commits October 8, 2024 10:31

core imports

f5397da

Signed-off-by: Micah Chiang <[email protected]>

update imports

2d5b038

Signed-off-by: Micah Chiang <[email protected]>

update styles for notice banner

3e9fd3d

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 8, 2024

View reviewed changes

micahchiang added the css-library label Oct 8, 2024

micahchiang mentioned this pull request Oct 8, 2024

Mc core style import swap department-of-veterans-affairs/vets-website#32154

Draft

14 tasks

update headings styles order

68dd18a

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 8, 2024

View reviewed changes

temporarily remove headings from base/va

f2a1b82

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 8, 2024

View reviewed changes

humancompanion-usds mentioned this pull request Oct 9, 2024

Initiative: Formation Deprecation department-of-veterans-affairs/va.gov-team#66756

Open

update focus, row, va-introtext

8d43eda

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 9, 2024

View reviewed changes

updates for content-build

0414988

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 10, 2024

View reviewed changes

add comment for submit button

2a8431c

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 10, 2024

View reviewed changes

update font-family for source sans pro rename

ca33520

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Oct 11, 2024

View reviewed changes

powellkerry added 2 commits October 16, 2024 11:34

Merge branch 'main' into mc-update-css-library-core-stylesheet

a0588ab

update yarn.lock

19267ec

micahchiang mentioned this pull request Oct 16, 2024

Formation Deprecation - Core import swap department-of-veterans-affairs/vets-design-system-documentation#3397

Open

5 tasks

jamigibbs reviewed Oct 23, 2024

View reviewed changes

jamigibbs and others added 22 commits October 24, 2024 09:58

update image path for action link and alert icons

afbd68e

move alert images and update positioning

d83ffa3

remove background color from alert icons

f825ad2

Merge branch 'main' into mc-update-css-library-core-stylesheet

cffe38e

yarn build

7102e10

Signed-off-by: Micah Chiang <[email protected]>

Merge branch 'main' into mc-update-css-library-core-stylesheet

f820730

merge main and yarn build

391418f

Signed-off-by: Micah Chiang <[email protected]>

Clean up var/function imports in core that don't get compiled to css

8c953cb

Revert "Clean up var/function imports in core that don't get compiled…

3db925a

… to css" This reverts commit 8c953cb.

Clean up var/function imports in core that don't get compiled to css

9bc43e7

Merge branch 'main' into mc-update-css-library-core-stylesheet

5fa3a00

run yarn build and bump version

e092ace

Signed-off-by: Micah Chiang <[email protected]>

Merge branch 'main' into mc-update-css-library-core-stylesheet

0b95fa7

update lock file

4d070a1

add va-button-primary class

7e8ca74

increment version from locally created release

35d196b

run yarn build

bc5a71d

add functions import to modules that need it

181c1d5

Merge branch 'main' into mc-update-css-library-core-stylesheet

ee72eaa

Merge branch 'main' into mc-update-css-library-core-stylesheet

40405f6

update variables and version

e4b926e

Signed-off-by: Micah Chiang <[email protected]>

remove scale-rem from usa-form-width

a1555a2

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Nov 11, 2024

View reviewed changes

use formation override foundation styles from formation package

83a7fc8

Signed-off-by: Micah Chiang <[email protected]>

micahchiang commented Nov 11, 2024

View reviewed changes

micahchiang and others added 4 commits November 11, 2024 15:50

update

efa0ae9

Signed-off-by: Micah Chiang <[email protected]>

update -max-width to 1000px

059b7f4

Merge branch 'main' into mc-update-css-library-core-stylesheet

eb54563

update yarn.lock

774a279

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css-library: core imports #1359

css-library: core imports #1359

micahchiang commented Oct 8, 2024 •

edited by jamigibbs

Loading

micahchiang left a comment

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 8, 2024

micahchiang Oct 9, 2024

micahchiang Oct 9, 2024

micahchiang Oct 9, 2024

micahchiang Oct 10, 2024

micahchiang Oct 10, 2024

micahchiang Oct 10, 2024 •

edited

Loading

jamigibbs Oct 21, 2024

micahchiang Oct 21, 2024

micahchiang Oct 11, 2024

micahchiang Oct 11, 2024

micahchiang Oct 11, 2024

micahchiang Oct 11, 2024

jamigibbs Oct 23, 2024 •

edited

Loading

micahchiang Nov 11, 2024

micahchiang Nov 11, 2024

		$focus-outline: 2px solid $vads-color-action-focus-on-light;
		$focus-spacing: 2px;

		// This actually seems to be how things were before.
		// Leaving a comment here so it gets flagged in the PR.

css-library: core imports #1359

Are you sure you want to change the base?

css-library: core imports #1359

Conversation

micahchiang commented Oct 8, 2024 • edited by jamigibbs Loading

Chromatic

Configuring this pull request

Description

QA Checklist

Screenshots

Acceptance criteria

Definition of done

micahchiang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

micahchiang Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

micahchiang commented Oct 8, 2024 •

edited by jamigibbs

Loading

micahchiang Oct 10, 2024 •

edited

Loading

jamigibbs Oct 23, 2024 •

edited

Loading