Merge pull request #3511 from department-of-veterans-affairs/3452-fon…

…t-token-update

Rename font-size-base to font-size-root, add source-sans-normalized with associated utility class
Update css-library to 0.15.0, and component-library to 48.0.2

.gitignore

@@ -9,6 +9,11 @@ node_modules
 tmp_remote_assets
 src/.jekyll-cache
 src/assets/stylesheets/component-library.css
+src/assets/stylesheets/core.css
+src/assets/stylesheets/mobile-typography.css
+src/assets/stylesheets/shame.css
+src/assets/stylesheets/uswds-typography.css
+src/assets/stylesheets/utilities.css
 src/formation.min.css
 src/vendor
 src/_data/component-docs.json

config/gulp/css.js

@@ -17,7 +17,16 @@ gulp.task('copy-web-components-css', function (done) {
   return stream;
 });
 
+gulp.task('copy-css-library-css', function (done) {
+  console.log('copying css-library CSS');
+  var stream = gulp.src('./node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/*.css')
+    .pipe(gulp.dest('src/assets/stylesheets/'));
+
+  return stream;
+});
+
 gulp.task(task, gulp.series(
   'copy-formation-css',
-  'copy-web-components-css'
+  'copy-web-components-css',
+  'copy-css-library-css'
 ));

package.json

@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^47.1.0",
+    "@department-of-veterans-affairs/component-library": "^48.0.2",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",
@@ -38,9 +38,10 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/formation": "^11.0.12",
-    "@department-of-veterans-affairs/css-library": "^0.12.2"
+    "@department-of-veterans-affairs/css-library": "^0.15.0"
   },
   "engines": {
     "npm": "6.14.8"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/_data/tokens/vads-font-primitive.csv

@@ -15,7 +15,8 @@ vads-font-line-length-5,Primitive,vads-size-line-length-5,,uswds-system-font-lin
 vads-font-line-length-6,Primitive,vads-size-line-length-6,88ex,uswds-system-font-line-length-6,88ex,From USWDS.
 vads-font-line-length-none,Primitive,vads-size-line-length-none,,uswds-system-font-line-length-none,none,From USWDS.
 vads-font-size-2xl,Primitive,vads-font-size-2xl,,uswds-system-font-size-14,40px,
-vads-font-size-base,Primitive,vads-font-size-base,17px,uswds-system-font-size-6,17px,
+font-size-root,Primitive,font-size-root,16px,uswds-system-font-size-6,16px,
+vads-font-size-source-sans-normalized,Primitive,vads-font-size-source-sans-normalized,16.96px,uswds-system-font-size-7,16.96px,
 vads-font-size-lg,Primitive,vads-font-size-lg,,uswds-system-font-size-8,20px,
 vads-font-size-md,Primitive,vads-font-size-md,,uswds-system-font-size-6,17px,
 vads-font-size-sm,Primitive,vads-font-size-sm,,uswds-system-font-size-4,15px,

src/_data/tokens/vads-font-semantic.csv

@@ -6,7 +6,7 @@ vads-font-size-body-large,Semantic,vads-font-size-body-large,uswds-system-font-s
 vads-font-size-body-lead,Semantic,vads-font-size-body-lead,,,vads-font-size-body-large,Lead font size for body text. For lead paragraphs.,20px
 vads-font-size-body-medium,Semantic,vads-font-size-body-medium,uswds-system-font-size-6,17px,,Medium body font size,
 vads-font-size-body-small,Semantic,vads-font-size-body-small,uswds-system-font-size-4,15px,,Smallest body font size,
-vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-base,Eyebrow is an experimental request which adds type above an h1.,17px
+vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-root,Eyebrow is an experimental request which adds type above an h1.,16px
 vads-font-size-heading-level-1,Semantic,vads-font-size-heading-level-1,uswds-system-font-size-14,40px,,Heading level 1. h1 value.,
 vads-font-size-heading-level-2,Semantic,vads-font-size-heading-level-2,uswds-system-font-size-12,32px,,Heading level 2. h2 value. Was 30px,
 vads-font-size-heading-level-3,Semantic,vads-font-size-heading-level-3,uswds-system-font-size-8,20px,,Heading level 3. h3 value.,

src/_data/tokens/vads.tokens.json

@@ -2814,7 +2814,7 @@
             }
           }
         },
-        "vads-font-size-base": {
+        "vads-font-size-root": {
           "type": "dimension",
           "value": "{uswds.font.size.uswds-system-font-size-6}",
           "extensions": {
@@ -2829,6 +2829,21 @@
             }
           }
         },
+        "vads-u-font-size--source-sans-normalized": {
+          "type": "dimension",
+          "value": "{uswds.font.size.uswds-system-font-size-7}",
+          "extensions": {
+            "org.lukasoppermann.figmaDesignTokens": {
+              "mode": "Value",
+              "collection": "vads-primitives",
+              "scopes": [
+                "ALL_SCOPES"
+              ],
+              "variableId": "VariableID:562:4293",
+              "exportKey": "variables"
+            }
+          }
+        },
         "vads-font-size-lg": {
           "type": "dimension",
           "value": "{uswds.font.size.uswds-system-font-size-8}",
@@ -3228,7 +3243,7 @@
       },
       "vads-label-font-size": {
         "type": "color",
-        "value": "{vads-primitives.font.size.vads-font-size-base}",
+        "value": "{vads-primitives.font.size.vads-font-size-root}",
         "extensions": {
           "org.lukasoppermann.figmaDesignTokens": {
             "mode": "Mode 1",

src/_foundation/utilities/html/font-size.html

@@ -1,17 +1,19 @@
 <h2 class="vads-u-font-size--h4">Sizing by name</h2>
 
 <div class="vads-l-row">
-  <div class="vads-l-col usa-bitter">
+  <div class="vads-l-col vads-u-font-family--serif">
     <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
-    <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
+    <p class="vads-u-font-size--root">16px .vads-u-font-size--root</p>
+    <p class="vads-u-font-size--source-sans-normalized">&nbsp;<!-- spacer for alignment --></p>
     <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
     <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
     <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>
     <p class="vads-u-font-size--2xl">40px .vads-u-font-size--2xl</p>
   </div>
-  <div class="vads-l-col usa-sans">
+  <div class="vads-l-col vads-u-font-family--sans">
     <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
     <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
+    <p class="vads-u-font-size--source-sans-normalized">16.96px .vads-u-font-size--source-sans-normalized</p>
     <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
     <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
     <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>

src/_includes/head.html

@@ -37,6 +37,7 @@
 
   <link rel="stylesheet" href="{{ '/formation.min.css' | prepend: site.baseurl | append: cacheBust }}">
   <link rel="stylesheet" href="{{ '/assets/stylesheets/application.css' | prepend: site.baseurl | append: cacheBust }}">
+  <link rel="stylesheet" href="{{ '/assets/stylesheets/utilities.css' | prepend: site.baseurl | append: cacheBust }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 

src/assets/stylesheets/_layout/_content-wrappers.scss

@@ -19,7 +19,7 @@
   .highlight pre {
     margin: 0;
     color: $vads-color-base;
-    font-size: $font-size-base;
+    font-size: $font-size-root;
     line-height: 1.5;
   }
 

yarn.lock

@@ -9,25 +9,25 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@department-of-veterans-affairs/component-library@^47.1.0":
-  version "47.1.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-47.1.0.tgz#2162d343b38614057632af42e444c658bf68d908"
-  integrity sha512-ZKTDY8kiQ3F3i3hL3OLQ+fyv9B4Xi1qQkUnBegu8TC6KjXDNed3PxAuVO+5iJXYi604cgBW72gXYZYbi63ITFQ==
+"@department-of-veterans-affairs/component-library@^48.0.2":
+  version "48.0.2"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-48.0.2.tgz#01e9a25430c27cfbb67ebffb7b7ec15bf254dfe6"
+  integrity sha512-2lUryYdaxeP08Z9mT/wYoTsm2rxic5tSdivmp4P3Rg9AT3hvA397TkDYS6Jvvuo5f4bLg0+mOXOI8+aEI0dy4Q==
   dependencies:
     "@department-of-veterans-affairs/react-components" "28.1.0"
-    "@department-of-veterans-affairs/web-components" "15.1.0"
+    "@department-of-veterans-affairs/web-components" "16.0.2"
     i18next "^21.6.14"
     i18next-browser-languagedetector "^6.1.4"
     react-focus-on "^3.5.1"
     react-transition-group "^1.0.0"
 
-"@department-of-veterans-affairs/css-library@^0.12.2":
-  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.12.2.tgz#da2554d1d71c1927b7462fa70d9cc8b482f8206e"
-  integrity sha512-nkrgeEGPWLEuoAfCdfFFPNIWIc9BDnxXZZ3HxZrKjL3yIAgNZYB+gm02JbYUHNXZZfXdfHxseaBY4M5C+Z3Iqg==
+"@department-of-veterans-affairs/css-library@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.15.0.tgz#22aa45ab093c32fb492e7537c287aca28fed4f09"
+  integrity sha512-JhOUMHpEsuX6echHZEtOOMXa8ULSBR6nqf5HlaXdAnPG/B4kfNNII6VEXXvByuavGVduaL7N0u1LpEpdVlDGig==
   dependencies:
     "@divriots/style-dictionary-to-figma" "^0.4.0"
-    "@uswds/uswds" "^3.8.1"
+    "@uswds/uswds" "^3.9.0"
     rimraf "^5.0.5"
 
 "@department-of-veterans-affairs/formation@^11.0.12":
@@ -51,12 +51,11 @@
     react-transition-group "1"
     recast "^0.14.4"
 
-"@department-of-veterans-affairs/web-components@15.1.0":
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-15.1.0.tgz#ec0a6952a591f9ed0a7d3ddea2211047a3471d71"
-  integrity sha512-/kUPjVJb+Ira1rekD3suBNDJqYFzW1rsF5xT6d2NLe58kY6JnbMV+/w9KH1fG1uCIaXV5RaKVK0bDjSjMhRxAw==
+"@department-of-veterans-affairs/web-components@16.0.2":
+  version "16.0.2"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-16.0.2.tgz#d278ad7572220fcf0767944cf6abb73211e22300"
+  integrity sha512-W3uXYDtIJa//kUVOZqosYHMx54PPVgzwWQtThw/AbdwjGTFWh6p+4DFc+BBpE0j8pRFjgFxtaT01iDPloTRWqg==
   dependencies:
-    "@department-of-veterans-affairs/css-library" "^0.12.2"
     "@stencil/core" "4.20.0"
     aria-hidden "^1.1.3"
     body-scroll-lock "^4.0.0-beta.0"
@@ -96,12 +95,11 @@
   resolved "https://registry.yarnpkg.com/@stencil/core/-/core-4.20.0.tgz#221f2b36ab999891560449b02d6915862c435f49"
   integrity sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==
 
-"@uswds/uswds@^3.8.1":
-  version "3.8.2"
-  resolved "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.8.2.tgz#230668293c33f6866995ba9d03d6f42aba251336"
-  integrity sha512-8sTx/GqlbTwSIK+0AFOGrYdaW1rKVB7Bp0+v9AMVt3I5vPK7CL0+I6vlclSf3U7ysJZeTTdkNS8q89sIAeL+AA==
+"@uswds/uswds@^3.9.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@uswds/uswds/-/uswds-3.10.0.tgz#f78ab69e26dec0080a92845b3dd1d9ddab26e6e9"
+  integrity sha512-LWFTQzp4e3kqtnD/Wsyfx9uGTkn5GEpzhscNWJMIsdWBGKtiu96QT99oRJUmcsB6HbGhR0Th0FtlK/Zzx2WghA==
   dependencies:
-    object-assign "4.1.1"
     receptor "1.0.0"
     resolve-id-refs "0.1.0"
 
@@ -1898,7 +1896,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
-object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==