From 4c9d250a9735c2e55cdcd81bfb69a39f03c8a802 Mon Sep 17 00:00:00 2001 From: Ian Date: Wed, 15 Nov 2023 15:44:47 -0600 Subject: [PATCH] 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 --- package.json | 1 + packages/web-components/package.json | 1 + .../va-privacy-agreement.scss | 2 +- .../va-statement-of-truth.scss | 2 +- .../web-components/src/global/_functions.scss | 2 +- .../web-components/src/global/_variables.scss | 102 ----------------- packages/web-components/src/global/main.css | 2 +- .../web-components/src/global/variables.css | 105 ------------------ .../src/mixins/uswds-error-border.scss | 2 +- yarn.lock | 4 +- 10 files changed, 10 insertions(+), 213 deletions(-) delete mode 100644 packages/web-components/src/global/_variables.scss delete mode 100644 packages/web-components/src/global/variables.css diff --git a/package.json b/package.json index 0b2b9127e..983014225 100644 --- 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 index 9003b1618..d23feba40 100644 --- 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 index ecb4fa24d..7d4f0c177 100644 --- 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 index fe3cf3f8a..d2dcd25d5 100644 --- 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 index 0766570cd..e348ab987 100644 --- 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 deleted file mode 100644 index 411cf3d42..000000000 --- a/packages/web-components/src/global/_variables.scss +++ /dev/null @@ -1,102 +0,0 @@ - -// Do not edit directly -// Generated on Tue, 01 Aug 2023 15:25:06 GMT - -$color-base: #212121; -$color-white: #ffffff; -$color-black: #000000; -$color-orange: #eb7f29; -$color-link-default: #004795; -$color-link-visited: #4c2c92; -$color-warning-message: #fac922; -$color-gibill-accent: #fff1d2; -$color-primary: #0071bb; -$color-primary-darker: #003e73; -$color-primary-darkest: #112e51; -$color-primary-alt: #02bfe7; -$color-primary-alt-dark: #00a6d2; -$color-primary-alt-darkest: #046b99; -$color-primary-alt-light: #9bdaf1; -$color-primary-alt-lightest: #e1f3f8; -$color-secondary: #e31c3d; -$color-secondary-dark: #cd2026; -$color-secondary-darkest: #981b1e; -$color-secondary-light: #e59393; -$color-secondary-lightest: #f9dede; -$color-gray: #5b616b; -$color-gray-dark: #323a45; -$color-gray-medium: #757575; -$color-gray-light: #aeb0b5; -$color-gray-light-alt: #eeeeee; -$color-gray-lighter: #d6d7d9; -$color-gray-lightest: #f1f1f1; -$color-gray-warm-dark: #494440; -$color-gray-warm-light: #e4e2e0; -$color-gray-cool-light: #dce4ef; -$color-green: #2e8540; -$color-green-dark: #1e5f2f; -$color-green-darker: #195c27; -$color-green-darkest: #0f3f1f; -$color-green-light: #7dbf7c; -$color-green-lighter: #94bfa2; -$color-green-lightest: #e7f4e4; -$color-gold: #fdb81e; -$color-gold-light: #f9c642; -$color-gold-lighter: #fad980; -$color-gold-lightest: #fff1d2; -$v3-color-error-dark: #b50909; -$v3-color-base-darkest: #1B1B1B; -$font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; -$font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif; -$font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif; -$font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; -$font-weight-normal: 400; -$font-weight-bold: 700; -$font-style-normal: normal; -$font-style-italic: italic; -$font-size-sm: 1.5rem; -$font-size-base: 1.6rem; -$font-size-md: 1.7rem; -$font-size-lg: 2rem; -$font-size-xl: 3rem; -$font-size-2xl: 4rem; -$font-size-h1: 4rem; -$font-size-h2: 3rem; -$font-size-h3: 2rem; -$font-size-h4: 1.7rem; -$font-size-h5: 1.5rem; -$font-size-h6: 1.5rem; -$v3-font-base-size: 16px; -$units-0: 0; -$units-1: 0.8rem; -$units-2: 1.6rem; -$units-3: 2.4rem; -$units-4: 3.2rem; -$units-5: 4rem; -$units-6: 4.8rem; -$units-7: 5.6rem; -$units-8: 6.4rem; -$units-9: 7.2rem; -$units-10: 8rem; -$units-15: 12rem; -$units-1px: 1px; -$units-0p25: 2px; -$units-0p5: 0.4rem; -$units-1p5: 1.2rem; -$units-2p5: 2rem; -$units-neg-1px: -1px; -$units-neg-0p25: -2px; -$units-neg-0p5: -0.4rem; -$units-neg-1: -0.8rem; -$units-neg-1p5: -1.2rem; -$units-neg-2: -1.6rem; -$units-neg-2p5: -2rem; -$units-neg-3: -2.4rem; -$units-neg-4: -3.2rem; -$units-neg-5: -4rem; -$units-neg-6: -4.8rem; -$units-neg-7: -5.6rem; -$units-neg-8: -6.4rem; -$units-neg-9: -7.2rem; -$units-neg-10: -8rem; -$units-neg-15: -12rem; \ No newline at end of file diff --git a/packages/web-components/src/global/main.css b/packages/web-components/src/global/main.css index 062d81ba9..8fe7fd12f 100644 --- 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 deleted file mode 100644 index abedcb126..000000000 --- a/packages/web-components/src/global/variables.css +++ /dev/null @@ -1,105 +0,0 @@ -/** - * Do not edit directly - * Generated on Tue, 01 Aug 2023 15:25:06 GMT - */ - -:root { - --color-base: #212121; - --color-white: #ffffff; - --color-black: #000000; - --color-orange: #eb7f29; - --color-link-default: #004795; - --color-link-visited: #4c2c92; - --color-warning-message: #fac922; - --color-gibill-accent: #fff1d2; - --color-primary: #0071bb; - --color-primary-darker: #003e73; - --color-primary-darkest: #112e51; - --color-primary-alt: #02bfe7; - --color-primary-alt-dark: #00a6d2; - --color-primary-alt-darkest: #046b99; - --color-primary-alt-light: #9bdaf1; - --color-primary-alt-lightest: #e1f3f8; - --color-secondary: #e31c3d; - --color-secondary-dark: #cd2026; - --color-secondary-darkest: #981b1e; - --color-secondary-light: #e59393; - --color-secondary-lightest: #f9dede; - --color-gray: #5b616b; - --color-gray-dark: #323a45; - --color-gray-medium: #757575; - --color-gray-light: #aeb0b5; - --color-gray-light-alt: #eeeeee; - --color-gray-lighter: #d6d7d9; - --color-gray-lightest: #f1f1f1; - --color-gray-warm-dark: #494440; - --color-gray-warm-light: #e4e2e0; - --color-gray-cool-light: #dce4ef; - --color-green: #2e8540; - --color-green-dark: #1e5f2f; - --color-green-darker: #195c27; - --color-green-darkest: #0f3f1f; - --color-green-light: #7dbf7c; - --color-green-lighter: #94bfa2; - --color-green-lightest: #e7f4e4; - --color-gold: #fdb81e; - --color-gold-light: #f9c642; - --color-gold-lighter: #fad980; - --color-gold-lightest: #fff1d2; - --v3-color-error-dark: #b50909; - --v3-color-base-darkest: #1B1B1B; - --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; - --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; - --font-weight-normal: 400; - --font-weight-bold: 700; - --font-style-normal: normal; - --font-style-italic: italic; - --font-size-sm: 1.5rem; - --font-size-base: 1.6rem; - --font-size-md: 1.7rem; - --font-size-lg: 2rem; - --font-size-xl: 3rem; - --font-size-2xl: 4rem; - --font-size-h1: 4rem; - --font-size-h2: 3rem; - --font-size-h3: 2rem; - --font-size-h4: 1.7rem; - --font-size-h5: 1.5rem; - --font-size-h6: 1.5rem; - --v3-font-base-size: 16px; - --units-0: 0; - --units-1: 0.8rem; - --units-2: 1.6rem; - --units-3: 2.4rem; - --units-4: 3.2rem; - --units-5: 4rem; - --units-6: 4.8rem; - --units-7: 5.6rem; - --units-8: 6.4rem; - --units-9: 7.2rem; - --units-10: 8rem; - --units-15: 12rem; - --units-1px: 1px; - --units-0p25: 2px; - --units-0p5: 0.4rem; - --units-1p5: 1.2rem; - --units-2p5: 2rem; - --units-neg-1px: -1px; - --units-neg-0p25: -2px; - --units-neg-0p5: -0.4rem; - --units-neg-1: -0.8rem; - --units-neg-1p5: -1.2rem; - --units-neg-2: -1.6rem; - --units-neg-2p5: -2rem; - --units-neg-3: -2.4rem; - --units-neg-4: -3.2rem; - --units-neg-5: -4rem; - --units-neg-6: -4.8rem; - --units-neg-7: -5.6rem; - --units-neg-8: -6.4rem; - --units-neg-9: -7.2rem; - --units-neg-10: -8rem; - --units-neg-15: -12rem; -} diff --git a/packages/web-components/src/mixins/uswds-error-border.scss b/packages/web-components/src/mixins/uswds-error-border.scss index 0a9051f92..dd5bfbdf5 100644 --- 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 index 3d1d25bca..4a1415be2 100644 --- 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