update web-components to use variables from css-library (#945)

* update repo to use variables from css-library * updated lock file * set version of css-library dep * update yarn.lock * add css-library to root level package.json
department-of-veterans-affairs · Nov 15, 2023 · 4c9d250 · 4c9d250
1 parent afb8c5a
commit 4c9d250
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 213 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "prism": "^1.27.0"
   },
   "dependencies": {
+    "@department-of-veterans-affairs/css-library": "^0.0.1",
     "webpack": "5"
   }
 }
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -27,6 +27,7 @@
     "serve": "stencil build --dev --watch --serve"
   },
   "dependencies": {
+    "@department-of-veterans-affairs/css-library": "^0.0.1",
     "@stencil/core": "^2.19.2",
     "aria-hidden": "^1.1.3",
     "body-scroll-lock": "^4.0.0-beta.0",

diff --git a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss
@@ -1,7 +1,7 @@
 @use 'uswds-helpers/src/styles/usa-sr-only';
 @use 'usa-label/src/styles/usa-label';
 @import '../../mixins/accessibility.css';
-@import '../../global/variables';
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
 
 :host {
   display: block;

diff --git a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.scss
@@ -1,7 +1,7 @@
 @forward 'settings';
 @use 'uswds-helpers/src/styles/usa-sr-only';
 @use 'uswds-utilities/src/styles/utility-fonts.scss';
-@import '../../global/variables';
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
 
 :host :not(h3) {
   font-size: 1.06 * $v3-font-base-size;

diff --git a/packages/web-components/src/global/_functions.scss b/packages/web-components/src/global/_functions.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 
-@import 'variables';
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
 
 // Uses $v3-font-base-size from _variables.scss
 @function rem-override($original) {

diff --git a/packages/web-components/src/global/_variables.scss b/packages/web-components/src/global/_variables.scss
diff --git a/packages/web-components/src/global/main.css b/packages/web-components/src/global/main.css
@@ -1,4 +1,4 @@
-@import 'variables.css';
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css';
 @import '../components/va-breadcrumbs/va-breadcrumbs-slot.css';
 @import '../components/va-modal/va-modal-slot.css';
 @import '../components/va-table/va-table-slot.css';

diff --git a/packages/web-components/src/global/variables.css b/packages/web-components/src/global/variables.css
diff --git a/packages/web-components/src/mixins/uswds-error-border.scss b/packages/web-components/src/mixins/uswds-error-border.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
 @import 'functions';
 
 :host([error]:not([error=''])[uswds]:not([uswds='false'])) {

diff --git a/yarn.lock b/yarn.lock
@@ -1891,6 +1891,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@department-of-veterans-affairs/component-library-monorepo@workspace:."
   dependencies:
+    "@department-of-veterans-affairs/css-library": ^0.0.1
     webpack: 5
   languageName: unknown
   linkType: soft
@@ -1919,7 +1920,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/css-library@workspace:packages/css-library":
+"@department-of-veterans-affairs/css-library@^0.0.1, @department-of-veterans-affairs/css-library@workspace:packages/css-library":
   version: 0.0.0-use.local
   resolution: "@department-of-veterans-affairs/css-library@workspace:packages/css-library"
   dependencies:
@@ -2048,6 +2049,7 @@ __metadata:
   dependencies:
     "@axe-core/puppeteer": ^4.4.0
     "@babel/core": ^7.12.13
+    "@department-of-veterans-affairs/css-library": ^0.0.1
     "@department-of-veterans-affairs/formation": ^7.0.8
     "@stencil/core": ^2.19.2
     "@stencil/postcss": ^2.0.0