CSS Library: Migrate VA styles from Formation #1124

jamigibbs · 2024-04-18T19:58:19Z

Chromatic

https://2537-formation-styles-to-css-library--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

What is this PR doing?

Moves necessary Formation files into CSS Library. Reference this import mapping spreadsheet.
- Many of these files and code blocks should be replaced by USWDS style imports or web components.
Updated anywhere that node-sass functionality was being used for dart-sass compatibility
Updated tokens in those stylesheets to semantic tokens (if available)
Added fonts and image assets
- Some font files may still be missing but those files should just need to be dropped into the fonts folder.
The build script is updated to generate assets

What has not been added from Formation?

The CSS Library already offers utilities and tokens that we will want to use instead of porting over the old stuff:

grid
utilities
breakpoints
font awesome

What's next after this PR is merged?

Swapping Formation links for CSS Library so that we can migrate off of the Formation package.
Replace styles with USWDS imports or web components and start deleting some of this stuff.
Organization! This is just a mapping from Formation but as we remove a lot of these files with the USWDS v3 migration, we should re-organize the CSS Library

related department-of-veterans-affairs/vets-design-system-documentation#2537
closes department-of-veterans-affairs/vets-design-system-documentation#2768

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)

jamigibbs · 2024-04-23T19:31:09Z

packages/css-library/src/assets/fonts/bitter-bold.ttf

I've added the Bitter font files (from Formation) here which will copy over into dist/fonts.

I have also loaded USWDS v3 @font-face font imports which loads the font face for and references the font files in the USWDS package for these:

Roboto Mono Web

Source Sans Pro Web

Merriweather Web

component-library/packages/css-library/src/stylesheets/base/_fonts.scss

Line 7 in 9b902d5

@use "uswds-fonts";

component-library/packages/css-library/src/stylesheets/_core.scss

Lines 3 to 7 in 9b902d5

@use 'uswds-core' with (

$theme-show-notifications: false,

// TODO: verify USWDS font path

$theme-font-path: '../node_modules/@uswds/uswds/dist/fonts',

);

The problem though is that they have added "Web" to all of these font names so at some point we will need to update wherever "Source Sans Pro" is referenced to "Source Sans Pro Web". The same with "Merriweather" to "Merriweather Web", etc.

jamigibbs · 2024-04-23T19:41:40Z

packages/css-library/package.json

@@ -11,15 +11,19 @@
    "build:tokens": "style-dictionary build",
    "build:stylesheets": "sass --load-path=../../node_modules/@uswds/uswds/packages/ src/stylesheets:dist/",
    "build:minify": "yarn build:stylesheets --style compressed --no-source-map",
-    "build": "yarn run copy && yarn build:tokens && yarn build:minify",
-    "copy": "node ./copy-uswds-color-tokens.js"
+    "build:minify-core": "sass --style compressed --no-source-map dist/core.css:dist/core.min.css",


The build:minify-core script isn't being used right now but I'm going to leave it here as a working example of how we could generate minified stylesheet(s) if necessary.

jamigibbs · 2024-04-23T19:43:14Z

packages/css-library/src/assets/img/arrow-both.png

I have added just the images from Formation that were being referenced in the stylesheets that were moved over so they would still work. They will be copied over to dist/img.

But I expect that we wouldn't actually need any of these images in the CSS Library eventually. All necessary images would instead be coming from component-library or USWDS directly.

jamigibbs · 2024-04-23T19:44:48Z

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

@@ -0,0 +1,434 @@
+//============ PORTED MIXINS FROM FORMATION ==============//


There is zero organization for the mixins in this file because I don't expect any of these to survive the Formation culling. I just moved over whatever mixins were necessary to keep the ported stylesheets working.

jamigibbs · 2024-04-23T19:45:54Z

packages/css-library/src/stylesheets/_override-function.scss

@@ -0,0 +1,159 @@
+@use 'sass:math';


I had to make some modifications to this file in order for it to work with dart-sass but I expect that this will also eventually go away as we remove stylesheets.

jamigibbs · 2024-04-23T19:50:09Z

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

@@ -0,0 +1,189 @@
+// This file is a place where you put all the code you're not proud of,


jamigibbs · 2024-04-23T19:51:59Z

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

+  - Source Sans Pro Web
+  - Merriweather Web
+*/
+@use "uswds-fonts";


This will add @font-face imports for Roboto Mono Web, Source Sans Pro Web, and Merriweather Web from the USWDS v3 package. They all include "Web" in the name though which is different from v1.

jamigibbs · 2024-04-23T19:55:02Z

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

@@ -0,0 +1,374 @@
+@import '../override-function';
+
+@import 'uswds-core/src/styles/mixins/typography/usa-content-styles';


This stylesheet is the same as elements.scss.

This file is the "16px root font" version and elements.scss is the "10px root font" version. The elements.scss file is being used in the component-library currently.

Is this file actually using 16px as its root font size? I see font-size: $em-base below on line 14, and saw that variable being set in /formation-overrides/_variables.scss as 10px.

lol ignore me, I just remembered we're setting font-size on the body directly on line 23.

jamigibbs · 2024-04-23T19:56:44Z

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

Moved this fonts stylesheet to /stylesheets/base/_b-font-faces.scss to mirror the Formation name and structure.

jamigibbs · 2024-04-23T19:59:48Z

packages/css-library/src/stylesheets/formation-overrides/_variables.scss

+$h5-font-size: scale-rem(1.5rem);
+
+$color-black-light: #212121;
+$color-base: $color-black-light;


All of the tokens in this stylesheet are "imposter tokens". They are only here so that the ported stylesheets continue to work. These should all go away as we remove things though.

jamigibbs · 2024-04-23T20:16:58Z

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

+);
+
+$font-path: "./fonts";  // TODO: Verify asset path
+$image-path: "./img"; // TODO: Verify asset path


These asset paths point to where the assets will be in dist/ but when we start connecting stylesheets, this will need to be verified that it's correct.

jamigibbs · 2024-04-23T20:30:39Z

packages/css-library/src/stylesheets/lib/_normalize.scss

+  See: https://github.com/uswds/uswds/blob/98566ec5dc12807a2b0bc36699a033fe3a711d44/packages/uswds-global/_index.scss
+*/
+
+@use "uswds-elements/lib/normalize";


I think we can just start using the USWDS v3 Normalize.css import instead of trying to keep using the one from USWDS v1 (which Formation was importing).

But USWDS v1 uses normalize v3.0.3 and USWDS v3 is using v8.0.1

I'm not sure if there will be any significant changes since Normalize just makes browsers render HTML elements more consistently but just something I wanted to call out.

I'm in favor of moving to V3's normalize.

I agree with Andrew. Where impact is minimal, we should try and get onto V3 stuff as we go.

micahchiang

I think this looks good for getting us to a spot where we can cut over from Formation to CSS-Library and begin swapping imports. Exciting!

We'll have to do some digging around the uswds repo as a group, but my hope is that we'll be able to replace a lot of this stuff with direct imports from uswds-core

micahchiang · 2024-04-25T20:27:05Z

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

+@import './override-function.scss';
+
+body {
+  // used a lot in vets-website


micahchiang · 2024-04-25T20:50:05Z

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

@@ -0,0 +1,374 @@
+@import '../override-function';
+
+@import 'uswds-core/src/styles/mixins/typography/usa-content-styles';


Is this file actually using 16px as its root font size? I see font-size: $em-base below on line 14, and saw that variable being set in /formation-overrides/_variables.scss as 10px.

micahchiang · 2024-04-25T21:15:02Z

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

@@ -0,0 +1,374 @@
+@import '../override-function';
+
+@import 'uswds-core/src/styles/mixins/typography/usa-content-styles';


lol ignore me, I just remembered we're setting font-size on the body directly on line 23.

This reverts commit 33ebc51.

update dist build, add fonts, and va core stylesheet

3384787

jamigibbs added the css-library label Apr 18, 2024

jamigibbs added 11 commits April 18, 2024 15:10

add back original elements.scss file for component-library

2f0be13

run chromatic

3bc3c3b

revert chromatic changes

697f74b

add more formation stylesheets and img assets

3b842d9

Merge branch 'main' into 2537-formation-styles-to-css-library

907cabf

add other formation component stylesheets

37b10e8

move img folder and add external link module

d936736

Merge branch 'main' into 2537-formation-styles-to-css-library

1469c3e

add module stylesheets

1dad5c4

Merge branch 'main' into 2537-formation-styles-to-css-library

483374f

cleanup and adjust file names

9b902d5

jamigibbs commented Apr 23, 2024

View reviewed changes

cleanup

abefd31

jamigibbs commented Apr 23, 2024

View reviewed changes

update readme and generate full.css

268ba70

jamigibbs marked this pull request as ready for review April 23, 2024 20:48

jamigibbs requested a review from a team as a code owner April 23, 2024 20:48

jamigibbs mentioned this pull request Apr 24, 2024

Formation Deprecation: Review the migrated files in CSS Library department-of-veterans-affairs/vets-design-system-documentation#2768

Closed

7 tasks

jamigibbs mentioned this pull request Apr 24, 2024

Formation Deprecation - Migrate font settings from Formation to CSS Library department-of-veterans-affairs/vets-design-system-documentation#2537

Closed

2 tasks

Andrew565 approved these changes Apr 24, 2024

View reviewed changes

micahchiang reviewed Apr 25, 2024

View reviewed changes

jamigibbs added 5 commits April 29, 2024 11:41

update readme

db66789

Merge branch 'main' into 2537-formation-styles-to-css-library

d4dc1bf

update package version

6b19c8f

update css-library publish step

06900bd

update css-library version

7f3e0ff

jamigibbs mentioned this pull request Apr 30, 2024

hard code height and width of search icon svg in px for teamsites department-of-veterans-affairs/veteran-facing-services-tools#1032

Merged

5 tasks

jamigibbs added 11 commits May 7, 2024 09:42

add teamsite rem to px updates

54b1a0c

add units function

4a6d120

Merge branch 'main' into 2537-formation-styles-to-css-library

3c4caa2

rename functions file

d017cd5

revert package version

6092e78

revert lock file

c4def55

update version

7bf9487

update calc rem conversions

33ebc51

Revert "update calc rem conversions"

5c47949

This reverts commit 33ebc51.

updates for injected header

8d6d055

add more assets

a295680

jamigibbs merged commit 55f806a into main May 8, 2024
9 checks passed

jamigibbs deleted the 2537-formation-styles-to-css-library branch May 8, 2024 19:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Library: Migrate VA styles from Formation #1124

CSS Library: Migrate VA styles from Formation #1124

jamigibbs commented Apr 18, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024

jamigibbs Apr 23, 2024

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

micahchiang Apr 25, 2024

micahchiang Apr 25, 2024

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024

jamigibbs Apr 23, 2024 •

edited

Andrew565 Apr 24, 2024

micahchiang Apr 25, 2024

micahchiang left a comment

micahchiang Apr 25, 2024

micahchiang Apr 25, 2024

micahchiang Apr 25, 2024

	@use 'uswds-core' with (
	$theme-show-notifications: false,
	// TODO: verify USWDS font path
	$theme-font-path: '../node_modules/@uswds/uswds/dist/fonts',
	);

		@@ -0,0 +1,434 @@
		//============ PORTED MIXINS FROM FORMATION ==============//

		@@ -0,0 +1,189 @@
		// This file is a place where you put all the code you're not proud of,

		@@ -0,0 +1,374 @@
		@import '../override-function';

		@import 'uswds-core/src/styles/mixins/typography/usa-content-styles';

CSS Library: Migrate VA styles from Formation #1124

CSS Library: Migrate VA styles from Formation #1124

Conversation

jamigibbs commented Apr 18, 2024 • edited

Chromatic

Description

What is this PR doing?

What has not been added from Formation?

What's next after this PR is merged?

Acceptance criteria

Definition of done

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamigibbs Apr 23, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

jamigibbs commented Apr 18, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited

jamigibbs Apr 23, 2024 •

edited