diff --git a/packages/peregrine/lib/targets/peregrine-intercept.js b/packages/peregrine/lib/targets/peregrine-intercept.js index d81a1f4b28..37f47056c0 100644 --- a/packages/peregrine/lib/targets/peregrine-intercept.js +++ b/packages/peregrine/lib/targets/peregrine-intercept.js @@ -13,7 +13,10 @@ function TalonWrapperConfig(addTransforms) { wrapWith: wrapperModule => addTransforms({ type: 'source', - fileToTransform: path.join('./lib/talons/', talonFile), + fileToTransform: path.join( + '@magento/peregrine/lib/talons/', + talonFile + ), transformModule: '@magento/pwa-buildpack/lib/WebpackTools/loaders/wrap-esm-loader', options: { diff --git a/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js b/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js index 33b0e573ed..15afd1c539 100644 --- a/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js +++ b/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js @@ -63,13 +63,18 @@ class ModuleTransformConfig { } if (path.isAbsolute(fileToTransform)) { throw this._traceableError( - `Invalid fileToTransform path "${fileToTransform}": Extensions are not allowed to provide absolute fileToTransform paths! This transform request from "${requestor}" must provide a relative path to one of its own files.` + `Invalid fileToTransform path "${fileToTransform}": Extensions are not allowed to provide absolute fileToTransform paths! This transform request from "${requestor}" must provide a relative path to one of its own files, or to a file within the project's local source code.` ); } - // make module-absolute if relative - return fileToTransform.startsWith(requestor) - ? fileToTransform - : path.join(requestor, fileToTransform); + const belongsToRequestor = fileToTransform.startsWith(requestor); + const isRelative = fileToTransform.startsWith('.'); + + if (!belongsToRequestor && !isRelative) { + throw this._traceableError( + `Invalid fileToTransform path "${fileToTransform}": Cannot transform a file provided by another module! This transform request from "${requestor}" must provide a module-relative path to one of its own files, e.g. "${requestor}/some/file", or to a file within the project's local source code, e.g. "./index.css".` + ); + } + return fileToTransform; } /** * @@ -93,7 +98,11 @@ class ModuleTransformConfig { ); // Capturing in the sync phase so that a resolve failure is traceable. const resolveError = this._traceableError( - `ModuleTransformConfig could not resolve ${toResolve} in order to transform it with ${transformModule}.` + `ModuleTransformConfig could not resolve ${toResolve} in order to transform it with ${transformModule}. Resolver options: ${JSON.stringify( + this._resolver.config, + null, + 2 + )})` ); // push the promise, so we don't run a bunch of resolves all at once this._reqs.push( @@ -117,6 +126,7 @@ class ModuleTransformConfig { async toLoaderOptions() { const byType = { babel: {}, + postcss: {}, source: {} }; // Some reqs may still be outstanding! diff --git a/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js b/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js index 5f8f6471ff..41970d2f20 100644 --- a/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js +++ b/packages/pwa-buildpack/lib/WebpackTools/configureWebpack/getModuleRules.js @@ -95,36 +95,83 @@ getModuleRules.js = async ({ * @returns Rule object for Webpack `module` configuration which parses * CSS files */ -getModuleRules.css = async ({ paths, hasFlag }) => ({ - test: /\.css$/, - oneOf: [ - { - test: [paths.src, ...hasFlag('cssModules')], - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - localIdentName: '[name]-[local]-[hash:base64:3]', - modules: true - } +getModuleRules.css = async ({ mode, paths, hasFlag, transformRequests }) => { + const styleLoader = { + loader: 'style-loader' + }; + + const nonModuleRule = { + include: /node_modules/, + use: [ + styleLoader, + { + loader: 'css-loader', + options: { + modules: false } - ] - }, - { - include: /node_modules/, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - modules: false - } + } + ] + }; + + const cssModuleLoader = { + loader: 'css-loader', + options: { + sourceMap: mode === 'development', + localIdentName: '[name]-[local]-[hash:base64:3]', + modules: true + } + }; + + const moduleRule = { + test: [paths.src, ...hasFlag('cssModules')], + use: [styleLoader, cssModuleLoader] + }; + + const oneOf = [moduleRule, nonModuleRule]; + + const postCssTransformedModules = new Map(); + Object.entries(transformRequests.postcss).forEach( + ([plugin, requestsByFile]) => { + const pluginFactory = require(plugin); + Object.entries(requestsByFile).forEach(([filename, requests]) => { + let pluginsForFile = postCssTransformedModules.get(filename); + if (!pluginsForFile) { + pluginsForFile = []; + postCssTransformedModules.set(filename, pluginsForFile); } - ] + pluginsForFile.push([pluginFactory, requests]); + }); } - ] -}); + ); + if (postCssTransformedModules.size > 0) { + const postCssLoader = { + loader: 'postcss-loader', + ident: 'buildpack-postcss-loader', + options: { + ident: 'buildpack-postcss-loader', + plugins: loader => { + const pluginsForFile = + postCssTransformedModules.get(loader.resourcePath) || + []; + return pluginsForFile.map(([plugin, options]) => + plugin(options) + ); + }, + sourceMap: mode === 'development' && 'inline' + } + }; + const transformedModuleRule = { + include: [...postCssTransformedModules.keys()], + use: [styleLoader, cssModuleLoader, postCssLoader] + }; + oneOf.unshift(transformedModuleRule); + } + + return { + test: /\.css$/, + oneOf + }; +}; /** * @param {Buildpack/WebpackTools~WebpackConfigHelper} helper diff --git a/packages/pwa-buildpack/package.json b/packages/pwa-buildpack/package.json index 5747915802..2457ebfacd 100644 --- a/packages/pwa-buildpack/package.json +++ b/packages/pwa-buildpack/package.json @@ -81,6 +81,8 @@ "peerDependencies": { "babel-loader": "~8.0.5", "css-loader": "~2.1.1", + "postcss": "~7.0.26", + "postcss-loader": "~3.0.0", "terser-webpack-plugin": "~1.2.3", "webpack": "~4.38.0", "workbox-webpack-plugin": "5.1.3" diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json index fade432c87..81fdf8609b 100644 --- a/packages/venia-concept/package.json +++ b/packages/venia-concept/package.json @@ -24,6 +24,8 @@ "prettier:fix": "yarn run -s prettier -- --write", "start": "node server.js", "start:debug": "node --inspect-brk ./node_modules/.bin/webpack-dev-server --progress --color --env.mode development", + "storybook": "echo 'Venia component stories have moved to @magento/venia-ui. Trying to run in sibling directory...' && (cd ../venia-ui && yarn run storybook:build)", + "storybook:build": "yarn run storybook", "test": "yarn run -s prettier:check && yarn run -s lint && jest", "validate-queries": "yarn run download-schema && graphql validate-magento-pwa-queries --project venia", "watch": "webpack-dev-server --progress --color --env.mode development" @@ -94,6 +96,8 @@ "lodash.over": "~4.7.0", "memoize-one": "~5.0.0", "memory-fs": "~0.4.1", + "postcss": "~7.0.26", + "postcss-loader": "~3.0.0", "prettier": "~1.16.4", "prop-types": "~15.7.2", "react": "~16.9.0", diff --git a/packages/venia-concept/src/index.css b/packages/venia-concept/src/index.css index 04333bc10c..12405af92a 100755 --- a/packages/venia-concept/src/index.css +++ b/packages/venia-concept/src/index.css @@ -8,7 +8,7 @@ --venia-anim-out: cubic-bezier(0.4, 0, 1, 1); --venia-anim-standard: cubic-bezier(0.4, 0, 0.2, 1); --venia-background-color: 255, 255, 255; - --venia-border: 224, 224, 224; + --venia-foreground-color: 33, 33, 33; --venia-error: 192, 18, 63; --venia-error-alt: 255, 226, 234; --venia-font: Muli, -apple-system, BlinkMacSystemFont, sans-serif; @@ -20,7 +20,10 @@ --venia-teal-alt: 224, 240, 241; --venia-teal-dark: 0, 104, 108; --venia-teal-light: 212, 243, 238; - --venia-text: 33, 33, 33; + --venia-border: var(--venia-grey); + --venia-border-alt: var(--venia-grey-dark); + --venia-disabled: var(--venia-grey-dark); + --venia-text: var(--venia-foreground-color); --venia-text-alt: var(--venia-grey-darker); --venia-text-hint: 158, 158, 158; --venia-text-spot: 255, 99, 51; @@ -29,7 +32,7 @@ } html { - background-color: white; + background-color: rgb(var(--venia-background-color)); font-size: 100%; font-weight: 400; line-height: 1; @@ -38,7 +41,7 @@ html { } body { - background-color: white; + background-color: rgb(var(--venia-background-color)); color: rgb(var(--venia-text)); margin: 0; padding: 0; @@ -102,6 +105,7 @@ dt { button { background: none; + color: rgb(var(--venia-foreground-color)); border: 0; cursor: pointer; font-family: var(--venia-font); diff --git a/packages/venia-ui/lib/RootComponents/Category/category.css b/packages/venia-ui/lib/RootComponents/Category/category.css index a3fe74f773..6b64711e74 100644 --- a/packages/venia-ui/lib/RootComponents/Category/category.css +++ b/packages/venia-ui/lib/RootComponents/Category/category.css @@ -27,9 +27,9 @@ margin-left: 0.5rem; display: inline-block; padding: 0.75rem 2rem; - border: 1px solid black; + border: 1px solid rgb(var(--venia-foreground-color)); border-radius: 3px; - color: black; + color: rgb(var(--venia-foreground-color)); outline: none; } diff --git a/packages/venia-ui/lib/components/AuthBar/authBar.css b/packages/venia-ui/lib/components/AuthBar/authBar.css index 39f23f15ef..b25734a637 100644 --- a/packages/venia-ui/lib/components/AuthBar/authBar.css +++ b/packages/venia-ui/lib/components/AuthBar/authBar.css @@ -1,6 +1,6 @@ .root { align-items: center; - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; gap: 0.75rem; grid-auto-flow: column; diff --git a/packages/venia-ui/lib/components/Button/button.css b/packages/venia-ui/lib/components/Button/button.css index e0b75a1265..2d5a95cfed 100644 --- a/packages/venia-ui/lib/components/Button/button.css +++ b/packages/venia-ui/lib/components/Button/button.css @@ -17,7 +17,7 @@ .filled { background-color: rgb(var(--color)); - color: white; + color: rgb(var(--venia-background-color)); } .root:hover { @@ -39,7 +39,7 @@ .root:disabled { pointer-events: none; - --color: var(--venia-grey-dark); + --color: var(--venia-disabled); } .content { diff --git a/packages/venia-ui/lib/components/ButtonGroup/button.css b/packages/venia-ui/lib/components/ButtonGroup/button.css index 9ceaa906c1..b3ec2f5f1b 100644 --- a/packages/venia-ui/lib/components/ButtonGroup/button.css +++ b/packages/venia-ui/lib/components/ButtonGroup/button.css @@ -1,7 +1,7 @@ .root { composes: root from '../clickable.css'; - background: none white; - border: 1px solid rgb(var(--venia-grey-dark)); + background: none rgb(var(--venia-background-color)); + border: 1px solid rgb(var(--venia-border-alt)); color: rgb(var(--venia-text)); font-size: 0.75rem; font-weight: 600; @@ -30,8 +30,8 @@ } .root:disabled { - border-color: rgb(var(--venia-grey-dark)); - color: rgb(var(--venia-grey-dark)); + border-color: rgb(var(--venia-disabled)); + color: rgb(var(--venia-grey-disabled)); } .root:nth-of-type(1) { diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css index 039ed92742..2d13c8b161 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 0; display: grid; grid-template-rows: auto 1fr; diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css b/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css index 26ff67938d..a51bc99de7 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css @@ -25,8 +25,8 @@ .button { align-items: center; - background-color: white; - border: 1px solid rgb(var(--venia-grey-darker)); + background-color: rgb(var(--venia-background-color)); + border: 1px solid rgb(var(--venia-text-alt)); border-radius: 50%; display: inline-flex; height: 2.25rem; @@ -35,8 +35,8 @@ } .button:disabled { - border-color: rgb(var(--venia-grey-darker)) !important; - background-color: #d0d0d0 !important; + border-color: rgb(var(--venia-text-alt)) !important; + background-color: rgb(var(--venia-disabled)) !important; opacity: 0.5; cursor: not-allowed; } diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css index c6757caa7c..72170eb260 100644 --- a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css +++ b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.css @@ -21,4 +21,5 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: rgb(var(--venia-foreground-color)); } diff --git a/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css b/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css index ec5945bca5..3debfb5835 100644 --- a/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css +++ b/packages/venia-ui/lib/components/Checkout/Receipt/receipt.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; grid-template-rows: 1fr auto; height: 100vh; @@ -29,7 +29,7 @@ } .orderId { - color: #22a1a8; + color: rgb(var(--venia-teal-dark)); text-decoration: underline; } diff --git a/packages/venia-ui/lib/components/Checkout/addressForm.css b/packages/venia-ui/lib/components/Checkout/addressForm.css index c5bd189fbb..5f080b3168 100644 --- a/packages/venia-ui/lib/components/Checkout/addressForm.css +++ b/packages/venia-ui/lib/components/Checkout/addressForm.css @@ -15,7 +15,7 @@ /* fields */ .textInput { - background: white; + background: rgb(var(--venia-background-color)); border: 1px solid rgb(var(--venia-text-alt)); border-radius: 2px; color: rgb(var(--venia-text)); diff --git a/packages/venia-ui/lib/components/Checkout/checkoutButton.css b/packages/venia-ui/lib/components/Checkout/checkoutButton.css index dced51bd6e..1b20aff7b9 100644 --- a/packages/venia-ui/lib/components/Checkout/checkoutButton.css +++ b/packages/venia-ui/lib/components/Checkout/checkoutButton.css @@ -1,4 +1,4 @@ .icon { composes: root from '../Icon/icon.css'; - --stroke: white; + --stroke: rgb(var(--venia-background-color)); } diff --git a/packages/venia-ui/lib/components/Checkout/flow.css b/packages/venia-ui/lib/components/Checkout/flow.css index 4689db123a..8d758e552e 100644 --- a/packages/venia-ui/lib/components/Checkout/flow.css +++ b/packages/venia-ui/lib/components/Checkout/flow.css @@ -3,7 +3,7 @@ } .heading { - background-color: white; + background-color: rgb(var(--venia-background-color)); font-size: 0.875rem; font-weight: 600; grid-column-end: span 2; @@ -20,7 +20,7 @@ animation-duration: 224ms; animation-iteration-count: 1; animation-name: enter; - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 5rem; box-shadow: 0 -1px rgb(var(--venia-border)); display: grid; @@ -35,7 +35,7 @@ .footer { align-items: center; - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; grid-auto-columns: min-content; grid-auto-flow: column; diff --git a/packages/venia-ui/lib/components/Checkout/form.css b/packages/venia-ui/lib/components/Checkout/form.css index 5d48f20201..e3037ba9bb 100644 --- a/packages/venia-ui/lib/components/Checkout/form.css +++ b/packages/venia-ui/lib/components/Checkout/form.css @@ -18,7 +18,7 @@ .disabledPrompt { composes: informationPrompt; - color: rgb(var(--venia-grey-dark)); + color: rgb(var(--venia-disabled)); } .paymentDisplayPrimary { diff --git a/packages/venia-ui/lib/components/Checkout/paymentsForm.css b/packages/venia-ui/lib/components/Checkout/paymentsForm.css index b28cc32017..d45e499b78 100644 --- a/packages/venia-ui/lib/components/Checkout/paymentsForm.css +++ b/packages/venia-ui/lib/components/Checkout/paymentsForm.css @@ -15,7 +15,7 @@ } .textInput { - background: white; + background: rgb(var(--venia-background-color)); border: 1px solid rgb(var(--venia-text-alt)); border-radius: 2px; color: rgb(var(--venia-text)); diff --git a/packages/venia-ui/lib/components/Checkout/section.css b/packages/venia-ui/lib/components/Checkout/section.css index 59911423e4..e828c82fb0 100644 --- a/packages/venia-ui/lib/components/Checkout/section.css +++ b/packages/venia-ui/lib/components/Checkout/section.css @@ -1,7 +1,7 @@ .root { display: block; width: 100%; - background-color: white; + background-color: rgb(var(--venia-background-color)); border: none; } .root:focus { diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/editModal.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/editModal.css index 04da95e488..32c3c92217 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/editModal.css +++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/editModal.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; left: calc(50% - 370px); grid-template-rows: auto 1fr; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.css index 23840e70ca..e05b5bb744 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; left: calc(50% - 370px); grid-template-rows: auto 1fr; diff --git a/packages/venia-ui/lib/components/Field/field.css b/packages/venia-ui/lib/components/Field/field.css index 062d6c0860..f33197d1ec 100644 --- a/packages/venia-ui/lib/components/Field/field.css +++ b/packages/venia-ui/lib/components/Field/field.css @@ -14,7 +14,7 @@ } .input { - background: white; + background: rgb(var(--venia-background-color)); border: 1px solid rgb(var(--venia-text-alt)); border-radius: 2px; color: rgb(var(--venia-text)); @@ -37,7 +37,7 @@ } .requiredSymbol { - background-color: black; + background-color: var(--venia-text); width: 0.4rem; height: 0.4rem; border-radius: 50%; diff --git a/packages/venia-ui/lib/components/FilterModal/filterFooter.css b/packages/venia-ui/lib/components/FilterModal/filterFooter.css index 7a89de841b..583dd24dad 100644 --- a/packages/venia-ui/lib/components/FilterModal/filterFooter.css +++ b/packages/venia-ui/lib/components/FilterModal/filterFooter.css @@ -1,6 +1,6 @@ .root { align-items: center; - background-color: white; + background-color: rgb(var(--venia-background-color)); display: grid; gap: 0.75rem; grid-auto-columns: min-content; diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.css b/packages/venia-ui/lib/components/FilterModal/filterModal.css index 642e1a4016..a1cd35ee61 100644 --- a/packages/venia-ui/lib/components/FilterModal/filterModal.css +++ b/packages/venia-ui/lib/components/FilterModal/filterModal.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 0; display: grid; grid-template-rows: 1fr 5rem; diff --git a/packages/venia-ui/lib/components/Footer/footer.css b/packages/venia-ui/lib/components/Footer/footer.css index 83a1a0115f..b520f238a4 100755 --- a/packages/venia-ui/lib/components/Footer/footer.css +++ b/packages/venia-ui/lib/components/Footer/footer.css @@ -1,7 +1,7 @@ .root { background-color: rgb(var(--venia-grey)); border-top: 1px solid rgb(var(--venia-border)); - color: black; + color: rgb(var(--venia-foreground-color)); margin-top: 1rem; padding: 0 1rem; } diff --git a/packages/venia-ui/lib/components/Header/header.css b/packages/venia-ui/lib/components/Header/header.css index 5230924ba6..66514de0dc 100755 --- a/packages/venia-ui/lib/components/Header/header.css +++ b/packages/venia-ui/lib/components/Header/header.css @@ -75,7 +75,7 @@ } .loader { - color: rgb(var(--venia-grey-dark)); + color: rgb(var(--venia-disabled)); font-size: var(--dot-font-size); margin: var(--dot-shadow-offset) auto 0; position: relative; diff --git a/packages/venia-ui/lib/components/Mask/mask.css b/packages/venia-ui/lib/components/Mask/mask.css index 7ee6b2b3de..2bb2a9dd51 100644 --- a/packages/venia-ui/lib/components/Mask/mask.css +++ b/packages/venia-ui/lib/components/Mask/mask.css @@ -1,5 +1,5 @@ .root { - background-color: black; + background-color: rgb(var(--venia-foreground-color)); cursor: pointer; display: block; height: 100%; diff --git a/packages/venia-ui/lib/components/MiniCart/emptyMiniCartBody.css b/packages/venia-ui/lib/components/MiniCart/emptyMiniCartBody.css index 4740f3e24b..4f0fe3cd45 100644 --- a/packages/venia-ui/lib/components/MiniCart/emptyMiniCartBody.css +++ b/packages/venia-ui/lib/components/MiniCart/emptyMiniCartBody.css @@ -15,11 +15,11 @@ .continue { composes: root from '../Button/button.css'; - color: white; + color: rgb(var(--venia-background-color)); background-color: rgb(var(--color)); } .continue:hover { - color: white; + color: rgb(var(--venia-background-color)); background-color: rgb(var(--venia-teal)); } diff --git a/packages/venia-ui/lib/components/MiniCart/footer.css b/packages/venia-ui/lib/components/MiniCart/footer.css index 18d3f84282..1c0a968fe8 100644 --- a/packages/venia-ui/lib/components/MiniCart/footer.css +++ b/packages/venia-ui/lib/components/MiniCart/footer.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); padding: 0; } diff --git a/packages/venia-ui/lib/components/MiniCart/kebab.css b/packages/venia-ui/lib/components/MiniCart/kebab.css index 1f0ca93775..8a97af1619 100644 --- a/packages/venia-ui/lib/components/MiniCart/kebab.css +++ b/packages/venia-ui/lib/components/MiniCart/kebab.css @@ -10,7 +10,7 @@ .dropdown { align-items: center; - box-shadow: 0 0 1px rgb(0, 0, 0, 0.2); + box-shadow: 0 0 1px rgb(var(--venia-foreground-color), 0.2); display: grid; position: absolute; right: 20px; @@ -31,16 +31,16 @@ .dropdown li { display: block; width: 100%; - background-color: #fff; + background-color: rgb(var(--venia-background-color)); border-bottom: 1px solid rgb(var(--venia-border)); } .dropdown li:hover { - background-color: #eee; + background-color: rgb(var(--venia-grey)); } .kebab { outline: 0; border: none; - background-color: #fff; + background-color: rgb(var(--venia-background-color)); } diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.css b/packages/venia-ui/lib/components/MiniCart/miniCart.css index b0ba04b128..84144798bb 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.css +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.css @@ -2,7 +2,7 @@ --base-z-index: 4; --minicart-header-height: 3.5rem; align-content: start; - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 0; box-shadow: -1px 0 rgb(var(--venia-border)); display: grid; diff --git a/packages/venia-ui/lib/components/Navigation/navigation.css b/packages/venia-ui/lib/components/Navigation/navigation.css index 6fd5954078..6c9d4a9a57 100644 --- a/packages/venia-ui/lib/components/Navigation/navigation.css +++ b/packages/venia-ui/lib/components/Navigation/navigation.css @@ -24,7 +24,7 @@ .root { composes: exit hidden; - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 0; display: grid; grid-template-rows: auto 1fr auto; @@ -76,7 +76,7 @@ .modal { composes: exit hidden; - background-color: white; + background-color: rgb(var(--venia-background-color)); bottom: 0; left: 0; overflow: auto; diff --git a/packages/venia-ui/lib/components/Pagination/pagination.css b/packages/venia-ui/lib/components/Pagination/pagination.css index f41702c075..339b1b7456 100644 --- a/packages/venia-ui/lib/components/Pagination/pagination.css +++ b/packages/venia-ui/lib/components/Pagination/pagination.css @@ -1,5 +1,5 @@ .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); border-top: 1px solid rgb(var(--venia-border)); display: grid; gap: 0.25rem; diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.css b/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.css index 4b5230d972..0716dfee69 100644 --- a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.css +++ b/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.css @@ -6,7 +6,7 @@ border-radius: 50%; height: 0.875rem; width: 0.875rem; - box-shadow: 0 0 0 1px #ffffff; + box-shadow: 0 0 0 1px rgb(var(--venia-background-color)); outline: none; } @@ -36,7 +36,7 @@ .image { background-color: rgb(var(--venia-grey)); border-radius: 2px; - box-shadow: 0 0 0 1px white; + box-shadow: 0 0 0 1px rgb(var(--venia-background-color)); display: block; height: 100%; object-fit: contain; diff --git a/packages/venia-ui/lib/components/ProductOptions/swatch.css b/packages/venia-ui/lib/components/ProductOptions/swatch.css index 7ee2eb83e3..45aa03b0b7 100644 --- a/packages/venia-ui/lib/components/ProductOptions/swatch.css +++ b/packages/venia-ui/lib/components/ProductOptions/swatch.css @@ -2,7 +2,7 @@ composes: root from './tile.css'; background: var(--venia-swatch-bg); border-color: rgba(0, 0, 0, 0.1); - color: white; + color: rgb(var(--venia-background-color)); width: 3rem; --venia-swatch-bg: var(--venia-grey); } diff --git a/packages/venia-ui/lib/components/ProductOptions/tile.css b/packages/venia-ui/lib/components/ProductOptions/tile.css index ee95bf5878..132c3915bc 100644 --- a/packages/venia-ui/lib/components/ProductOptions/tile.css +++ b/packages/venia-ui/lib/components/ProductOptions/tile.css @@ -10,7 +10,7 @@ .root_selected { composes: root; background-color: rgb(var(--venia-text)); - color: white; + color: rgb(var(--venia-background-color)); } .root_focused { composes: root; diff --git a/packages/venia-ui/lib/components/ProductSort/productSort.css b/packages/venia-ui/lib/components/ProductSort/productSort.css index d485414216..d0c64ef558 100644 --- a/packages/venia-ui/lib/components/ProductSort/productSort.css +++ b/packages/venia-ui/lib/components/ProductSort/productSort.css @@ -6,9 +6,9 @@ margin-left: 0.5rem; display: inline-block; padding: 0.75rem 2rem; - border: 1px solid black; + border: 1px solid rgb(var(--venia-foreground-color)); border-radius: 3px; - color: black; + color: rgb(var(--venia-foreground-color)); outline: none; } @@ -20,18 +20,18 @@ min-width: 10rem; margin: 0.125rem 0 0; font-size: 1rem; - color: black; + color: rgb(var(--venia-foreground-color)); text-align: left; list-style: none; - background-color: #fff; + background-color: rgb(var(--venia-background-color)); background-clip: padding-box; - border: 1px solid rgb(var(--venia-grey-dark)); + border: 1px solid rgb(var(--venia-border-alt)); border-radius: 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .menuItem { - border-bottom: 1px solid rgb(var(--venia-grey-dark)); + border-bottom: 1px solid rgb(var(--venia-border-alt)); } .menuItem:last-child { diff --git a/packages/venia-ui/lib/components/SearchBar/autocomplete.css b/packages/venia-ui/lib/components/SearchBar/autocomplete.css index f8ad668b44..86d6fca70f 100644 --- a/packages/venia-ui/lib/components/SearchBar/autocomplete.css +++ b/packages/venia-ui/lib/components/SearchBar/autocomplete.css @@ -15,7 +15,7 @@ } .root { - background-color: white; + background-color: rgb(var(--venia-background-color)); border: 1px solid rgb(var(--venia-border)); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); display: grid; diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.css b/packages/venia-ui/lib/components/SearchPage/searchPage.css index 375df5b38e..69f0d840aa 100644 --- a/packages/venia-ui/lib/components/SearchPage/searchPage.css +++ b/packages/venia-ui/lib/components/SearchPage/searchPage.css @@ -26,9 +26,9 @@ margin-left: 0.5rem; display: inline-block; padding: 0.75rem 2rem; - border: 1px solid black; + border: 1px solid rgb(var(--venia-foreground-color)); border-radius: 3px; - color: black; + color: rgb(var(--venia-foreground-color)); outline: none; } diff --git a/packages/venia-ui/lib/components/ToastContainer/toast.css b/packages/venia-ui/lib/components/ToastContainer/toast.css index d58c80921e..50e71b44ff 100644 --- a/packages/venia-ui/lib/components/ToastContainer/toast.css +++ b/packages/venia-ui/lib/components/ToastContainer/toast.css @@ -1,13 +1,9 @@ -@value info: rgb(0, 104, 108); -@value warning: rgb(var(--venia-orange)); -@value error: rgb(220, 20, 60); - .root { align-items: start; - background-color: white; + background-color: rgb(var(--venia-background-color)); border-radius: 2px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); - color: rgb(33, 33, 33); + color: rgb(var(--venia-foreground-color)); display: grid; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 0.8rem; @@ -22,7 +18,7 @@ width: 20rem; border: 1px solid; - border-color: #d1d1d1; + border-color: rgb(var(--venia-border-alt)); animation: toast-pulsate 0.5s 1s; } @@ -48,25 +44,25 @@ } .infoToast > .icon { - color: info; + color: rgb(var(--venia-teal-dark)); } .warningToast { composes: root; - border-bottom: 4px solid warning; + border-bottom: 4px solid rgb(var(--venia-orange)); } .warningToast > .icon { - color: warning; + color: rgb(var(--venia-orange)); } .errorToast { composes: root; - border-bottom: 4px solid error; + border-bottom: 4px solid rgb(var(--venia-error)); } .errorToast > .icon { - color: error; + color: rgb(var(--venia-error)); } .message { @@ -94,16 +90,16 @@ .controls { grid-area: controls; - border-left: 1px solid rgb(224, 224, 224); + border-left: 1px solid rgb(var(--venia-border)); padding-left: 0.75rem; } .actionButton { font-weight: 600; text-decoration: underline; - color: rgb(33, 33, 33); + color: rgb(var(--venia-foreground-color)); } .dismissButton { - color: rgb(112, 112, 112); + color: rgb(var(--venia-gray-darker)); } diff --git a/packages/venia-ui/lib/targets/venia-ui-intercept.js b/packages/venia-ui/lib/targets/venia-ui-intercept.js index 2814161cb1..d7086c72fc 100644 --- a/packages/venia-ui/lib/targets/venia-ui-intercept.js +++ b/packages/venia-ui/lib/targets/venia-ui-intercept.js @@ -103,25 +103,25 @@ module.exports = targets => { name: 'Cart', pattern: '/cart', exact: true, - path: '../CartPage' + path: '@magento/venia-ui/lib/components/CartPage' }, { name: 'Search', pattern: '/search.html', exact: true, - path: '../../RootComponents/Search' + path: '@magento/venia-ui/lib/RootComponents/Search' }, { name: 'CreateAccountPage', pattern: '/create-account', exact: true, - path: '../CreateAccountPage' + path: '@magento/venia-ui/lib/components/CreateAccountPage' }, { name: 'CheckoutPage', pattern: '/checkout', exact: true, - path: '../CheckoutPage' + path: '@magento/venia-ui/lib/components/CheckoutPage' } ]); }; diff --git a/yarn.lock b/yarn.lock index 16685de8c3..8d73a7fa1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12879,7 +12879,7 @@ postcss-load-config@^2.0.0: cosmiconfig "^5.0.0" import-cwd "^2.0.0" -postcss-loader@^3.0.0: +postcss-loader@^3.0.0, postcss-loader@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d" integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA== @@ -12967,6 +12967,15 @@ postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0. source-map "^0.6.1" supports-color "^6.1.0" +postcss@~7.0.26: + version "7.0.31" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.31.tgz#332af45cb73e26c0ee2614d7c7fb02dfcc2bd6dd" + integrity sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + prebuild-install@^5.3.2, prebuild-install@^5.3.3: version "5.3.3" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.3.tgz#ef4052baac60d465f5ba6bf003c9c1de79b9da8e"