From 365c020f3c73c2c8650e566844a2ab4b91e39907 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Wed, 29 Mar 2023 14:35:42 -0400 Subject: [PATCH 01/13] Updating dependencies to tailwind v3.3, updating configurations with v3 changes, fixing issues in components following upgrade --- package.json | 2 +- packages/pwa-theme-venia/tailwind.preset.js | 16 +- packages/venia-concept/package.json | 2 +- packages/venia-concept/src/index.js | 2 +- packages/venia-concept/tailwind.config.js | 17 +- .../lib/components/AccountMenu/accountMenu.js | 3 +- .../AccountMenu/accountMenu.module.css | 9 +- .../Breadcrumbs/breadcrumbs.module.css | 2 +- .../CategoryTree/categoryLeaf.module.css | 2 +- .../components/Checkout/section.module.css | 2 +- .../lib/components/Dialog/dialog.module.css | 2 +- .../Header/storeSwitcher.module.css | 2 +- .../LegacyMiniCart/cartOptions.module.css | 2 +- .../lib/components/MiniCart/miniCart.js | 3 +- .../components/MiniCart/miniCart.module.css | 9 +- yarn.lock | 415 +++++++++++------- 16 files changed, 280 insertions(+), 210 deletions(-) diff --git a/package.json b/package.json index 7f1c07c7a9..832c5e26e1 100755 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "lodash.debounce": "~4.0.8", "prettier": "~1.16.4", "rimraf": "~2.6.3", - "tailwindcss": "~2.2.7" + "tailwindcss": "~3.3.0" }, "optionalDependencies": { "bundlesize": "~0.18.1", diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 2499aef096..4c87a25208 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -239,21 +239,7 @@ const config = { // TODO @TW: see top too. Had to disable to get working locally. // plugins: [aspectRatioPlugin, corePlugin], plugins: [corePlugin], - theme, - variants: { - extend: { - backgroundColor: ['checked'], - backgroundImage: ['focus'], - borderColor: ['even'], - borderStyle: ['even'], - borderWidth: ['even', 'last'], - boxShadow: ['active'], - fontWeight: ['first'], - outline: ['active', 'focus'], - pointerEvents: ['disabled'], - textColor: ['disabled', 'first'] - } - } + theme }; module.exports = config; diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json index bc2f7e69ab..d56c29c715 100644 --- a/packages/venia-concept/package.json +++ b/packages/venia-concept/package.json @@ -116,7 +116,7 @@ "rimraf": "~2.6.3", "style-loader": "~2.0.0", "subscriptions-transport-ws": "~0.9.19", - "tailwindcss": "~2.2.7", + "tailwindcss": "~3.3.0", "terser-webpack-plugin": "~1.2.3", "uuid": "~8.3.2", "webpack": "~4.46.0", diff --git a/packages/venia-concept/src/index.js b/packages/venia-concept/src/index.js index 3cf949987d..b87c949e52 100755 --- a/packages/venia-concept/src/index.js +++ b/packages/venia-concept/src/index.js @@ -2,10 +2,10 @@ import React from 'react'; import { render } from 'react-dom'; import store from './store'; +import './index.css'; import app from '@magento/peregrine/lib/store/actions/app'; import Adapter from '@magento/venia-ui/lib/components/Adapter'; import { registerSW } from './registerSW'; -import './index.css'; // server rendering differs from browser rendering const isServer = !globalThis.document; diff --git a/packages/venia-concept/tailwind.config.js b/packages/venia-concept/tailwind.config.js index 24967a5b0c..245792e7fb 100644 --- a/packages/venia-concept/tailwind.config.js +++ b/packages/venia-concept/tailwind.config.js @@ -10,10 +10,8 @@ const config = { presets: [venia], // Configure how Tailwind statically analyzes your code here. // Note that the Tailwind's `jit` mode doesn't actually use PurgeCSS. - purge: { - // Include paths to every file that may refer to Tailwind classnames. - // Classnames not found in these files will be excluded at build time. - content: [ + content: { + files: [ './node_modules/@magento/venia-ui/lib/**/*.module.css', '../venia-ui/lib/**/*.module.css', './src/**/*.module.css', @@ -22,12 +20,9 @@ const config = { // Extract Tailwind classnames from source files. // Our default matcher only matches targets of CSS Modules' `composes`, // not classnames included directly in HTML or JS! - extractors: [ - { - extensions: ['css'], - extractor: content => content.match(matcher) || [] - } - ] + extract: { + css: content => content.match(matcher) || [] + } }, // Set the character Tailwind uses when prefixing classnames with variants. // CSS Modules doesn't like Tailwind's default `:`, so we use `_`. @@ -48,4 +43,4 @@ module.exports = config; * composes: mx-auto from global; * } */ -const matcher = /(?<=composes:.*)(\b\S+\b)(?=.*from global;)/g; +const matcher = /(?<=composes:.*)(\S+)(?=.*from global;)/g; diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js index 6ae4e620c4..6ee915609f 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js @@ -27,7 +27,7 @@ const AccountMenu = React.forwardRef((props, ref) => { } = talonProps; const classes = useStyle(defaultClasses, props.classes); - const rootClass = accountMenuIsOpen ? classes.root_open : classes.root; + const rootClass = accountMenuIsOpen ? classes.root_open : classes.root_closed; const contentsClass = accountMenuIsOpen ? classes.contents_open : classes.contents; @@ -94,6 +94,7 @@ export default AccountMenu; AccountMenu.propTypes = { classes: shape({ root: string, + root_closed: string, root_open: string, link: string, contents_open: string, diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css index 6fb1c3fc9e..e602bf070b 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css @@ -1,19 +1,24 @@ .root { composes: absolute from global; composes: h-0 from global; - composes: left-[-100vw] from global; composes: max-w-[100vw] from global; composes: opacity-0 from global; composes: overflow-visible from global; composes: top-full from global; composes: z-menu from global; + composes: -translate-x-1/2 from global; + transition: opacity 192ms var(--venia-global-anim-out), visibility 192ms var(--venia-global-anim-out), /* Adding delay to move container off the screen after previous transitions happened */ left 0s 192ms; width: calc(100vw - 2rem); /* TODO @TW: cannot compose */ - transform: translate3d(-50%, 0, 0); +} +.root_closed { + composes: root; + + composes: left-[-100vw] from global; /* TODO @TW: review (B6) */ /* composes: invisible from global; */ visibility: hidden; diff --git a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css index c2cfccff73..799560899c 100644 --- a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css +++ b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css @@ -5,7 +5,7 @@ composes: ml-xs from global; /* Show ellipses when overflowing. */ composes: overflow-hidden from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: pt-[0.625rem] from global; composes: pb-[1rem] from global; composes: text-sm from global; diff --git a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.module.css b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.module.css index fdaf472f40..edd928b98d 100644 --- a/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.module.css +++ b/packages/venia-ui/lib/components/CategoryTree/categoryLeaf.module.css @@ -22,6 +22,6 @@ .text { composes: inline-block from global; composes: overflow-hidden from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: whitespace-nowrap from global; } diff --git a/packages/venia-ui/lib/components/Checkout/section.module.css b/packages/venia-ui/lib/components/Checkout/section.module.css index 0e791889ac..c919bddffd 100644 --- a/packages/venia-ui/lib/components/Checkout/section.module.css +++ b/packages/venia-ui/lib/components/Checkout/section.module.css @@ -35,7 +35,7 @@ composes: justify-self-stretch from global; composes: leading-normal from global; composes: overflow-hidden from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: text-sm from global; composes: whitespace-nowrap from global; } diff --git a/packages/venia-ui/lib/components/Dialog/dialog.module.css b/packages/venia-ui/lib/components/Dialog/dialog.module.css index 6c820265cd..185995f0f0 100644 --- a/packages/venia-ui/lib/components/Dialog/dialog.module.css +++ b/packages/venia-ui/lib/components/Dialog/dialog.module.css @@ -116,7 +116,7 @@ .headerText { composes: capitalize from global; composes: leading-tight from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: overflow-hidden from global; composes: text-subtle from global; composes: whitespace-nowrap from global; diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css index 32e723b797..5fae4c8ab6 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css @@ -14,7 +14,7 @@ .trigger { composes: max-w-[15rem] from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: overflow-hidden from global; composes: whitespace-nowrap from global; diff --git a/packages/venia-ui/lib/components/LegacyMiniCart/cartOptions.module.css b/packages/venia-ui/lib/components/LegacyMiniCart/cartOptions.module.css index 1dadc8c4fd..b0bc76560e 100644 --- a/packages/venia-ui/lib/components/LegacyMiniCart/cartOptions.module.css +++ b/packages/venia-ui/lib/components/LegacyMiniCart/cartOptions.module.css @@ -21,7 +21,7 @@ .name { composes: overflow-hidden from global; - composes: overflow-ellipsis from global; + composes: text-ellipsis from global; composes: whitespace-nowrap from global; } diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index b7a82ea632..8d820b041e 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -53,7 +53,7 @@ const MiniCart = React.forwardRef((props, ref) => { } = talonProps; const classes = useStyle(defaultClasses, props.classes); - const rootClass = isOpen ? classes.root_open : classes.root; + const rootClass = isOpen ? classes.root_open : classes.root_closed; const contentsClass = isOpen ? classes.contents_open : classes.contents; const quantityClassName = loading ? classes.quantity_loading @@ -181,6 +181,7 @@ export default MiniCart; MiniCart.propTypes = { classes: shape({ root: string, + root_closed: string, root_open: string, contents: string, contents_open: string, diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css index cd22f83a43..1800dc09a2 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css @@ -1,18 +1,23 @@ .root { composes: absolute from global; composes: h-0 from global; - composes: left-[-100vw] from global; composes: max-w-[100vw] from global; composes: opacity-0 from global; composes: overflow-visible from global; composes: top-full from global; composes: z-menu from global; + composes: -translate-x-1/2 from global; transition: opacity 192ms var(--venia-global-anim-out), visibility 192ms var(--venia-global-anim-out), /* Adding delay to move container off the screen after previous transitions happened */ left 0s 192ms; width: calc(100vw - 2rem); /* TODO @TW: review */ - transform: translate3d(-50%, 0, 0); +} + +.root_closed { + composes: root; + + composes: left-[-100vw] from global; /* TODO @TW: review (B6) */ /* composes: invisible from global; */ diff --git a/yarn.lock b/yarn.lock index cc7262137a..2019e93ebf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5265,21 +5265,12 @@ acorn-jsx@^5.3.1: resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== -acorn-node@^1.6.1: - version "1.8.2" - resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8" - integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A== - dependencies: - acorn "^7.0.0" - acorn-walk "^7.0.0" - xtend "^4.0.2" - acorn-walk@^6.1.1: version "6.2.0" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c" integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA== -acorn-walk@^7.0.0, acorn-walk@^7.1.1: +acorn-walk@^7.1.1: version "7.2.0" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== @@ -5289,7 +5280,7 @@ acorn@^6.0.7, acorn@^6.4.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6" integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ== -acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0: +acorn@^7.1.1, acorn@^7.4.0: version "7.4.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== @@ -5469,6 +5460,11 @@ ansi-to-html@^0.6.11: dependencies: entities "^2.0.0" +any-promise@^1.0.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" + integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A== + anymatch@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" @@ -5543,10 +5539,10 @@ arg@^4.1.0: resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089" integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA== -arg@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb" - integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA== +arg@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c" + integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg== argparse@^1.0.7: version "1.0.10" @@ -6370,7 +6366,7 @@ braces@^2.3.1, braces@^2.3.2: split-string "^3.0.2" to-regex "^3.0.1" -braces@^3.0.1, braces@~3.0.2: +braces@^3.0.1, braces@^3.0.2, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -6614,7 +6610,7 @@ bytes@3.0.0: resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg= -bytes@3.1.0, bytes@^3.0.0, bytes@^3.1.0: +bytes@3.1.0, bytes@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6" integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== @@ -6922,7 +6918,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2: +chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -7008,7 +7004,7 @@ chokidar@^2.0.0, chokidar@^2.0.3, chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@~3.5.2: +chokidar@^3.4.1, chokidar@^3.4.2, chokidar@~3.5.2: version "3.5.2" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== @@ -7023,6 +7019,21 @@ chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@~3.5.2: optionalDependencies: fsevents "~2.3.2" +chokidar@^3.5.3: + version "3.5.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chownr@^1.1.1, chownr@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -7232,7 +7243,7 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@~1.1.4: +color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== @@ -7295,12 +7306,12 @@ commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, comm resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -commander@^4.1.1: +commander@^4.0.0, commander@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== -commander@^6.0.0, commander@^6.2.1: +commander@^6.2.1: version "6.2.1" resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== @@ -7573,7 +7584,7 @@ cosmiconfig@7.0.0: path-type "^4.0.0" yaml "^1.10.0" -cosmiconfig@7.0.1, cosmiconfig@^7.0.0, cosmiconfig@^7.0.1: +cosmiconfig@7.0.1, cosmiconfig@^7.0.0: version "7.0.1" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d" integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ== @@ -7827,11 +7838,6 @@ css-select@^4.1.3: domutils "^2.6.0" nth-check "^2.0.0" -css-unit-converter@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" - integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== - css-what@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" @@ -8159,7 +8165,7 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" -defined@^1.0.0, defined@~1.0.0: +defined@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= @@ -8257,15 +8263,6 @@ detect-port@^1.3.0: address "^1.0.1" debug "^2.6.0" -detective@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b" - integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg== - dependencies: - acorn-node "^1.6.1" - defined "^1.0.0" - minimist "^1.1.1" - devcert@~1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/devcert/-/devcert-1.1.3.tgz#ff8119efae52ebf2449531b7482ae0f7211542e9" @@ -9396,7 +9393,7 @@ fast-glob@^2.2.6: merge2 "^1.2.3" micromatch "^3.1.10" -fast-glob@^3.1.1, fast-glob@^3.2.7, fast-glob@~3.2.4: +fast-glob@^3.1.1, fast-glob@~3.2.4: version "3.2.7" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1" integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q== @@ -9407,6 +9404,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.7, fast-glob@~3.2.4: merge2 "^1.3.0" micromatch "^4.0.4" +fast-glob@^3.2.12: + version "3.2.12" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" + integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + fast-glob@^3.2.4, fast-glob@^3.2.9: version "3.2.10" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.10.tgz#2734f83baa7f43b7fd41e13bc34438f4ffe284ee" @@ -9959,15 +9967,6 @@ fs-extra@^0.30.0: path-is-absolute "^1.0.0" rimraf "^2.2.8" -fs-extra@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1" - integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^6.0.1" - universalify "^2.0.0" - fs-extra@^9.0.0, fs-extra@^9.0.1: version "9.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" @@ -10257,12 +10256,12 @@ glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.2: dependencies: is-glob "^4.0.1" -glob-parent@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.1.tgz#42054f685eb6a44e7a7d189a96efa40a54971aa7" - integrity sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog== +glob-parent@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" + integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A== dependencies: - is-glob "^4.0.1" + is-glob "^4.0.3" glob-promise@^3.4.0: version "3.4.0" @@ -10276,6 +10275,18 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= +glob@7.1.6: + version "7.1.6" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" + integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + glob@^7.0.0, glob@^7.0.3, glob@^7.1.6, glob@~7.1.4: version "7.1.7" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" @@ -10956,11 +10967,6 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" -html-tags@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" - integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg== - html-void-elements@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483" @@ -11200,13 +11206,6 @@ immer@8.0.1: resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656" integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== -import-cwd@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92" - integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg== - dependencies: - import-from "^3.0.0" - import-fresh@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546" @@ -11223,7 +11222,7 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: parent-module "^1.0.0" resolve-from "^4.0.0" -import-from@3.0.0, import-from@^3.0.0: +import-from@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966" integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ== @@ -11524,6 +11523,13 @@ is-core-module@^2.2.0: dependencies: has "^1.0.3" +is-core-module@^2.9.0: + version "2.11.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144" + integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw== + dependencies: + has "^1.0.3" + is-data-descriptor@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" @@ -11653,7 +11659,7 @@ is-glob@^3.0.0, is-glob@^3.1.0: dependencies: is-extglob "^2.1.0" -is-glob@^4.0.0, is-glob@^4.0.1: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -12469,6 +12475,11 @@ jest@~26.6.3: import-local "^3.0.2" jest-cli "^26.6.3" +jiti@^1.17.2: + version "1.18.2" + resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd" + integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg== + jmespath@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217" @@ -12946,10 +12957,10 @@ li@^1.3.0: resolved "https://registry.yarnpkg.com/li/-/li-1.3.0.tgz#22c59bcaefaa9a8ef359cf759784e4bf106aea1b" integrity sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs= -lilconfig@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd" - integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg== +lilconfig@^2.0.5, lilconfig@^2.0.6: + version "2.1.0" + resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52" + integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ== lines-and-columns@^1.1.6: version "1.2.4" @@ -13163,11 +13174,6 @@ lodash.toarray@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE= -lodash.topath@^4.5.2: - version "4.5.2" - resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009" - integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak= - lodash.truncate@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" @@ -13547,6 +13553,14 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@~4.0.2: braces "^3.0.1" picomatch "^2.2.3" +micromatch@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" + integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== + dependencies: + braces "^3.0.2" + picomatch "^2.3.1" + miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -13770,11 +13784,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -modern-normalize@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7" - integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== - moment@^2.22.1: version "2.29.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" @@ -13846,6 +13855,15 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +mz@^2.7.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32" + integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q== + dependencies: + any-promise "^1.0.0" + object-assign "^4.0.1" + thenify-all "^1.0.0" + nan@^2.12.1, nan@^2.14.0: version "2.15.0" resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee" @@ -13856,6 +13874,11 @@ nanoid@^3.1.23: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== +nanoid@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -13968,13 +13991,6 @@ node-emoji@1.10.0: dependencies: lodash.toarray "^4.4.0" -node-emoji@^1.11.0: - version "1.11.0" - resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c" - integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A== - dependencies: - lodash "^4.17.21" - node-fetch-h2@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/node-fetch-h2/-/node-fetch-h2-2.3.0.tgz#c6188325f9bd3d834020bf0f2d6dc17ced2241ac" @@ -14232,10 +14248,10 @@ object-copy@^0.1.0: define-property "^0.2.5" kind-of "^3.0.3" -object-hash@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5" - integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw== +object-hash@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9" + integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw== object-inspect@^1.11.0, object-inspect@^1.9.0: version "1.11.1" @@ -14946,7 +14962,7 @@ path-key@^3.0.0, path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -path-parse@^1.0.6: +path-parse@^1.0.6, path-parse@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== @@ -15018,10 +15034,15 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== -pify@^2.0.0: +picomatch@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" + integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== + +pify@^2.0.0, pify@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" - integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= + integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== pify@^3.0.0: version "3.0.0" @@ -15207,21 +15228,28 @@ postcss-flexbugs-fixes@^4.2.1: dependencies: postcss "^7.0.26" -postcss-js@^3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33" - integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw== +postcss-import@^14.1.0: + version "14.1.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0" + integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + +postcss-js@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" + integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== dependencies: camelcase-css "^2.0.1" - postcss "^8.1.6" -postcss-load-config@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829" - integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g== +postcss-load-config@^3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855" + integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== dependencies: - import-cwd "^3.0.0" - lilconfig "^2.0.3" + lilconfig "^2.0.5" yaml "^1.10.2" postcss-loader@^4.2.0, postcss-loader@~4.3.0: @@ -15296,14 +15324,14 @@ postcss-modules-values@^4.0.0: dependencies: icss-utils "^5.0.0" -postcss-nested@5.0.6: - version "5.0.6" - resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc" - integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA== +postcss-nested@6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735" + integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== dependencies: - postcss-selector-parser "^6.0.6" + postcss-selector-parser "^6.0.10" -postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6: +postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: version "6.0.6" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== @@ -15311,10 +15339,18 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^3.3.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" - integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== +postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11: + version "6.0.11" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc" + integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== postcss-value-parser@^4.1.0: version "4.1.0" @@ -15330,7 +15366,16 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0 source-map "^0.6.1" supports-color "^6.1.0" -postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15, postcss@~8.3.6: +postcss@^8.0.9: + version "8.4.21" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" + integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + +postcss@^8.2.15, postcss@~8.3.6: version "8.3.6" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea" integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A== @@ -15632,16 +15677,6 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -purgecss@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742" - integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw== - dependencies: - commander "^6.0.0" - glob "^7.0.0" - postcss "^8.2.1" - postcss-selector-parser "^6.0.2" - qs@6.5.2, qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" @@ -16098,6 +16133,13 @@ react@~17.0.1: loose-envify "^1.1.0" object-assign "^4.1.1" +read-cache@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" + integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA== + dependencies: + pify "^2.3.0" + read-pkg-up@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978" @@ -16192,14 +16234,6 @@ recursive-readdir@2.2.2: dependencies: minimatch "3.0.4" -reduce-css-calc@^2.1.8: - version "2.1.8" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" - integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== - dependencies: - css-unit-converter "^1.1.1" - postcss-value-parser "^3.3.0" - reduce-reducers@^0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.4.3.tgz#8e052618801cd8fc2714b4915adaa8937eb6d66c" @@ -16542,7 +16576,16 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0: +resolve@^1.1.7, resolve@^1.22.1: + version "1.22.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" + integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== + dependencies: + is-core-module "^2.9.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== @@ -17248,6 +17291,11 @@ source-map-js@^0.6.2: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -17789,6 +17837,18 @@ subscriptions-transport-ws@^0.9.18, subscriptions-transport-ws@~0.9.19: symbol-observable "^1.0.4" ws "^5.2.0 || ^6.0.0 || ^7.0.0" +sucrase@^3.29.0: + version "3.31.0" + resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.31.0.tgz#daae4fd458167c5d4ba1cce6aef57b988b417b33" + integrity sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ== + dependencies: + commander "^4.0.0" + glob "7.1.6" + lines-and-columns "^1.1.6" + mz "^2.7.0" + pirates "^4.0.1" + ts-interface-checker "^0.1.9" + sudo-prompt@^8.2.0: version "8.2.5" resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-8.2.5.tgz#cc5ef3769a134bb94b24a631cc09628d4d53603e" @@ -17867,6 +17927,11 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + swagger2openapi@^7.0.2: version "7.0.8" resolved "https://registry.yarnpkg.com/swagger2openapi/-/swagger2openapi-7.0.8.tgz#12c88d5de776cb1cbba758994930f40ad0afac59" @@ -17944,42 +18009,35 @@ table@^6.0.9: string-width "^4.2.3" strip-ansi "^6.0.1" -tailwindcss@~2.2.7: - version "2.2.9" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.9.tgz#1484bd45a4a9f9f5de7faabf74c11bf0aeb5ad98" - integrity sha512-P8zCKFkEthfUvqcnun8DqGGXw4QqyDw971NAM23e8QQ+m5HW1agp4upq50rFGwGNtphVYvr+0zvVLSXo5/I9Qg== +tailwindcss@~3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.0.tgz#8cab40e5a10a10648118c0859ba8bfbc744a761e" + integrity sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw== dependencies: - arg "^5.0.1" - bytes "^3.0.0" - chalk "^4.1.2" - chokidar "^3.5.2" - color "^4.0.1" - cosmiconfig "^7.0.1" - detective "^5.2.0" + arg "^5.0.2" + chokidar "^3.5.3" + color-name "^1.1.4" didyoumean "^1.2.2" dlv "^1.1.3" - fast-glob "^3.2.7" - fs-extra "^10.0.0" - glob-parent "^6.0.1" - html-tags "^3.1.0" - is-glob "^4.0.1" - lodash "^4.17.21" - lodash.topath "^4.5.2" - modern-normalize "^1.1.0" - node-emoji "^1.11.0" + fast-glob "^3.2.12" + glob-parent "^6.0.2" + is-glob "^4.0.3" + jiti "^1.17.2" + lilconfig "^2.0.6" + micromatch "^4.0.5" normalize-path "^3.0.0" - object-hash "^2.2.0" - postcss-js "^3.0.3" - postcss-load-config "^3.1.0" - postcss-nested "5.0.6" - postcss-selector-parser "^6.0.6" - postcss-value-parser "^4.1.0" - pretty-hrtime "^1.0.3" - purgecss "^4.0.3" + object-hash "^3.0.0" + picocolors "^1.0.0" + postcss "^8.0.9" + postcss-import "^14.1.0" + postcss-js "^4.0.0" + postcss-load-config "^3.1.4" + postcss-nested "6.0.0" + postcss-selector-parser "^6.0.11" + postcss-value-parser "^4.2.0" quick-lru "^5.1.1" - reduce-css-calc "^2.1.8" - resolve "^1.20.0" - tmp "^0.2.1" + resolve "^1.22.1" + sucrase "^3.29.0" tap-diff@~0.1.1: version "0.1.1" @@ -18248,6 +18306,20 @@ text-table@0.2.0, text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= +thenify-all@^1.0.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726" + integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA== + dependencies: + thenify ">= 3.1.0 < 4" + +"thenify@>= 3.1.0 < 4": + version "3.3.1" + resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f" + integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw== + dependencies: + any-promise "^1.0.0" + throat@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b" @@ -18301,7 +18373,7 @@ title-case@^2.1.0: no-case "^2.2.0" upper-case "^1.0.3" -tmp@0.2.1, tmp@^0.2.1: +tmp@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== @@ -18462,6 +18534,11 @@ ts-essentials@^2.0.3: resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745" integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w== +ts-interface-checker@^0.1.9: + version "0.1.13" + resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" + integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== + ts-invariant@^0.4.0: version "0.4.4" resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86" @@ -19831,7 +19908,7 @@ xss@^1.0.6: commander "^2.20.3" cssfilter "0.0.10" -xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1: +xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== From 4c0b681489efa97ebe8b7b60ee940e5ae3befc9a Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Wed, 29 Mar 2023 15:45:11 -0400 Subject: [PATCH 02/13] Changing tokens to use tailwind config, refactor for border radius to make more configurable --- packages/pwa-theme-venia/lib/colors.js | 17 ++- packages/pwa-theme-venia/tailwind.preset.js | 48 ++++++--- .../components/Accordion/accordion.module.css | 2 +- .../addressBookPage.module.css | 2 +- .../AddressBookPage/addressCard.module.css | 4 +- .../lib/components/Button/button.module.css | 2 +- .../AddressBook/addressBook.module.css | 2 +- .../AddressBook/addressCard.module.css | 4 +- .../GuestSignIn/guestSignIn.module.css | 2 +- .../ItemsReview/itemsReview.module.css | 2 +- .../OrderSummary/orderSummary.module.css | 2 +- .../paymentInformation.module.css | 2 +- .../shippingInformation.module.css | 2 +- .../ShippingMethod/shippingMethod.module.css | 2 +- .../CheckoutPage/checkoutPage.module.css | 2 +- .../createAccountPage.module.css | 2 +- .../lib/components/Field/field.module.css | 2 +- .../forgotPasswordPage.module.css | 2 +- .../ResetPassword/resetPassword.module.css | 2 +- .../OrderDetails/orderTotal.module.css | 2 +- .../OrderHistoryPage/orderRow.module.css | 4 +- .../ProductSort/productSort.module.css | 2 +- .../quantityStepper.module.css | 2 +- .../SavedPaymentsPage/creditCard.module.css | 4 +- .../savedPaymentsPage.module.css | 2 +- .../SignInPage/signInPage.module.css | 2 +- .../components/TextArea/textArea.module.css | 2 +- .../components/TextInput/textInput.module.css | 2 +- .../WishlistPage/createWishlist.module.css | 2 +- .../WishlistPage/wishlist.module.css | 2 +- packages/venia-ui/lib/index.module.css | 101 ++++++------------ packages/venia-ui/lib/tokens.module.css | 38 +++---- 32 files changed, 137 insertions(+), 131 deletions(-) diff --git a/packages/pwa-theme-venia/lib/colors.js b/packages/pwa-theme-venia/lib/colors.js index 0a97f7c06d..aa1b18d94b 100644 --- a/packages/pwa-theme-venia/lib/colors.js +++ b/packages/pwa-theme-venia/lib/colors.js @@ -79,4 +79,19 @@ const getPropertyValueFunction = property => { }; }; -module.exports = { declareColors, getColors }; +const hexToRgb = (color) => { + if (color.indexOf('#') !== 0) { + return color; + } + + return color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) + .map((value) => { + return parseInt(value, 16); + }) + .filter((value) => { + return !isNaN(value); + }) + .join(' '); +} + +module.exports = { declareColors, getColors, hexToRgb }; diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 4c87a25208..01346aa087 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -1,6 +1,6 @@ // TODO @TW: see bottom too //const aspectRatioPlugin = require('@tailwindcss/aspect-ratio'); -const { getColors } = require('./lib/colors'); +const { getColors, hexToRgb } = require('./lib/colors'); const corePlugin = require('./plugins'); const colors = { @@ -56,18 +56,16 @@ const extend = { success: theme('colors.green.600'), warning: theme('colors.yellow.500') }), - borderRadius: { + borderRadius: theme => ({ // Primitive radius1: '4px', radius2: '8px', - radius3: '100%' - - // Generic - // TODO @TW: review. This causes error. - // radiusBox: theme('borderRadius.radius2'), - // radiusButton: theme('borderRadius.radius1'), - // radiusInput: theme('borderRadius.radius1'), - }, + radius3: '100%', + box: theme('borderRadius.md'), + button: theme('borderRadius.full'), + input: theme('borderRadius.md'), + badge: theme('borderRadius.md') + }), borderWidth: { DEFAULT: '1px' }, @@ -167,7 +165,8 @@ const extend = { lg: '3rem', DEFAULT: '1.5rem', filterSidebarWidth: '325px', - full: '100%' + full: '100%', + header: '5rem' }, textColor: theme => ({ colorDefault: theme('colors.gray.900'), // TODO @TW naming collision: TW puts "fontSize" + "color" under "text-" prefix @@ -229,7 +228,32 @@ const theme = { color: theme('colors.neutral.900') }, root: { - colors + colors: { + ...colors, + blue: { + 100: hexToRgb(theme('colors.blue.100')), + 400: hexToRgb(theme('colors.blue.400')), + 700: hexToRgb(theme('colors.blue.700')) + }, + gray: { + 50: hexToRgb(theme('colors.gray.50')), + 100: hexToRgb(theme('colors.gray.100')), + 300: hexToRgb(theme('colors.gray.300')), + 400: hexToRgb(theme('colors.gray.400')), + 500: hexToRgb(theme('colors.gray.500')), + 600: hexToRgb(theme('colors.gray.600')), + 700: hexToRgb(theme('colors.gray.700')), + 900: hexToRgb(theme('colors.gray.900')) + }, + green: { + 600: hexToRgb(theme('colors.green.600')) + }, + orange: hexToRgb(theme('colors.amber.500')), + red: { + 400: hexToRgb(theme('colors.red.400')), + 700: hexToRgb(theme('colors.red.700')), + } + } } } }) diff --git a/packages/venia-ui/lib/components/Accordion/accordion.module.css b/packages/venia-ui/lib/components/Accordion/accordion.module.css index 5ab90c95df..9340a5294e 100644 --- a/packages/venia-ui/lib/components/Accordion/accordion.module.css +++ b/packages/venia-ui/lib/components/Accordion/accordion.module.css @@ -2,5 +2,5 @@ composes: border-2 from global; composes: border-solid from global; composes: border-subtle from global; - composes: rounded-md from global; + composes: rounded-box from global; } diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css index a47750d271..e14529e4a8 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css @@ -33,7 +33,7 @@ composes: border-dashed from global; composes: border-subtle from global; composes: font-semibold from global; - composes: rounded-md from global; + composes: rounded-button from global; composes: text-brand-dark from global; composes: text-sm from global; transition: border-color 384ms var(--venia-global-anim-standard); diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css index 0212562f7b..87bc9609f5 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css @@ -6,7 +6,7 @@ composes: grid from global; composes: p-xs from global; composes: relative from global; - composes: rounded-md from global; + composes: rounded-box from global; grid-template-columns: 1fr max-content; composes: sm_px-md from global; @@ -77,7 +77,7 @@ composes: mb-2xs from global; composes: px-sm from global; composes: py-1.5 from global; - composes: rounded-md from global; + composes: rounded-badge from global; composes: text-xs from global; composes: w-max from global; } diff --git a/packages/venia-ui/lib/components/Button/button.module.css b/packages/venia-ui/lib/components/Button/button.module.css index 2ea2f9db39..798c04331f 100644 --- a/packages/venia-ui/lib/components/Button/button.module.css +++ b/packages/venia-ui/lib/components/Button/button.module.css @@ -12,7 +12,7 @@ composes: outline-none from global; composes: pointer-events-auto from global; composes: px-sm from global; - composes: rounded-full from global; + composes: rounded-button from global; composes: text-center from global; composes: text-sm from global; composes: uppercase from global; diff --git a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css index 4545f30d25..ca9106d81b 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css @@ -66,7 +66,7 @@ composes: border-dashed from global; composes: border-subtle from global; composes: font-semibold from global; - composes: rounded-md from global; + composes: rounded-button from global; composes: text-brand-dark from global; composes: text-sm from global; transition: border-color 384ms var(--venia-global-anim-standard); diff --git a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css index c83d705bc3..f68e8ef488 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css @@ -10,7 +10,7 @@ composes: px-5 from global; composes: py-xs from global; composes: relative from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: shadow-none from global; composes: text-colorDefault from global; transition: border-color 384ms var(--venia-global-anim-in); @@ -67,7 +67,7 @@ composes: mb-1 from global; composes: px-sm from global; composes: py-1.5 from global; - composes: rounded-md from global; + composes: rounded-badge from global; composes: text-xs from global; composes: w-max from global; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css b/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css index 816e95fc3f..872637ce20 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css @@ -19,7 +19,7 @@ .contentContainer { composes: border-0 from global; composes: p-0 from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: lg_border-2 from global; composes: lg_border-solid from global; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.module.css b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.module.css index 150fc852a9..b70e944cac 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.module.css @@ -2,7 +2,7 @@ composes: border-2 from global; composes: border-solid from global; composes: border-subtle from global; - composes: rounded-md from global; + composes: rounded-box from global; min-height: 2rem; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css b/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css index a2a6758027..aaa4eea331 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css @@ -8,7 +8,7 @@ composes: lg_border-2 from global; composes: lg_border-solid from global; composes: lg_border-subtle from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; composes: lg_mt-0 from global; composes: lg_p-md from global; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.module.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.module.css index b5819611a1..3dc053e474 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.module.css @@ -8,7 +8,7 @@ composes: border-2 from global; composes: border-solid from global; composes: border-subtle from global; - composes: rounded-md from global; + composes: rounded-box from global; } .loading { diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css index b604873114..02ef92b017 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css @@ -4,7 +4,7 @@ composes: border-solid from global; composes: border-subtle from global; composes: p-md from global; - composes: rounded-md from global; + composes: rounded-box from global; } .root_editMode { diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css index 28e02a1f54..74d1816ee2 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css @@ -5,7 +5,7 @@ composes: grid from global; composes: gap-y-xs from global; composes: p-md from global; - composes: rounded-md from global; + composes: rounded-box from global; } .done { diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css index c096919ea4..715118af82 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css @@ -77,7 +77,7 @@ composes: justify-items-center from global; composes: mb-xs from global; composes: p-xs from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: row-start-1 from global; composes: lg_grid-flow-col from global; diff --git a/packages/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css b/packages/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css index 748e8d9d5d..ed5e9a58f0 100644 --- a/packages/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css +++ b/packages/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css @@ -17,5 +17,5 @@ composes: lg_border-solid from global; composes: lg_border-subtle from global; composes: lg_pb-md from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; } diff --git a/packages/venia-ui/lib/components/Field/field.module.css b/packages/venia-ui/lib/components/Field/field.module.css index c6a9bc0cde..4f1cb29f8a 100644 --- a/packages/venia-ui/lib/components/Field/field.module.css +++ b/packages/venia-ui/lib/components/Field/field.module.css @@ -27,7 +27,7 @@ composes: inline-flex from global; composes: m-0 from global; composes: max-w-full from global; - composes: rounded-md from global; + composes: rounded-input from global; composes: text-colorDefault from global; composes: text-colorDefault from global; composes: w-full from global; diff --git a/packages/venia-ui/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css b/packages/venia-ui/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css index 748e8d9d5d..ed5e9a58f0 100644 --- a/packages/venia-ui/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css +++ b/packages/venia-ui/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css @@ -17,5 +17,5 @@ composes: lg_border-solid from global; composes: lg_border-subtle from global; composes: lg_pb-md from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; } diff --git a/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.module.css b/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.module.css index 77e116306c..986da84b57 100644 --- a/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.module.css +++ b/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.module.css @@ -49,5 +49,5 @@ composes: lg_border-2 from global; composes: lg_border-solid from global; composes: lg_border-subtle from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; } diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css index 55cb0084a0..1571e88123 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css @@ -10,7 +10,7 @@ composes: lg_border-solid from global; composes: lg_border-subtle from global; composes: lg_p-md from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; } .heading { diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css index 392c28e379..d1358d293b 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css @@ -4,7 +4,7 @@ composes: border-subtle from global; composes: grid from global; composes: grid-cols-2 from global; - composes: rounded-md from global; + composes: rounded-box from global; } @media (min-width: 960px) { @@ -134,7 +134,7 @@ composes: justify-self-start from global; composes: px-xs from global; composes: py-1 from global; - composes: rounded-md from global; + composes: rounded-badge from global; composes: text-2xs from global; } diff --git a/packages/venia-ui/lib/components/ProductSort/productSort.module.css b/packages/venia-ui/lib/components/ProductSort/productSort.module.css index 0728b84032..cb13d62469 100644 --- a/packages/venia-ui/lib/components/ProductSort/productSort.module.css +++ b/packages/venia-ui/lib/components/ProductSort/productSort.module.css @@ -44,7 +44,7 @@ composes: lg_border-gray-500 from global; composes: lg_font-normal from global; composes: lg_normal-case from global; - composes: lg_rounded-md from global; + composes: lg_rounded-input from global; } .desktopText { diff --git a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css index caca329041..fb3756c795 100644 --- a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css +++ b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css @@ -36,7 +36,7 @@ composes: inline-flex from global; composes: items-center from global; composes: justify-center from global; - composes: rounded-full from global; + composes: rounded-button from global; composes: w-[2rem] from global; stroke: rgb(var(--stroke)); diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css index 7c430cc153..f2213549ee 100644 --- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css +++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css @@ -8,7 +8,7 @@ composes: min-w-[20rem] from global; composes: px-md from global; composes: py-sm from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: relative from global; min-height: 10rem; } @@ -58,7 +58,7 @@ composes: opacity-100 from global; composes: px-md from global; composes: py-xs from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: top-0 from global; composes: w-full from global; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css index 7b4548bf39..3bb4bf4705 100644 --- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css +++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css @@ -44,7 +44,7 @@ composes: border-solid from global; composes: border-subtle from global; composes: font-semibold from global; - composes: rounded-md from global; + composes: rounded-button from global; composes: text-brand-dark from global; composes: text-sm from global; transition: border-color 384ms var(--venia-global-anim-standard); diff --git a/packages/venia-ui/lib/components/SignInPage/signInPage.module.css b/packages/venia-ui/lib/components/SignInPage/signInPage.module.css index 39e91914f5..5e895b4be9 100644 --- a/packages/venia-ui/lib/components/SignInPage/signInPage.module.css +++ b/packages/venia-ui/lib/components/SignInPage/signInPage.module.css @@ -17,5 +17,5 @@ composes: lg_border-solid from global; composes: lg_border-subtle from global; composes: lg_pb-md from global; - composes: lg_rounded-md from global; + composes: lg_rounded-box from global; } diff --git a/packages/venia-ui/lib/components/TextArea/textArea.module.css b/packages/venia-ui/lib/components/TextArea/textArea.module.css index d5fe5db063..1a8b692dd2 100644 --- a/packages/venia-ui/lib/components/TextArea/textArea.module.css +++ b/packages/venia-ui/lib/components/TextArea/textArea.module.css @@ -16,7 +16,7 @@ composes: min-w-full from global; composes: px-[15px] from global; composes: py-[12px] from global; - composes: rounded-md from global; + composes: rounded-input from global; composes: w-full from global; font-size: 1rem; } diff --git a/packages/venia-ui/lib/components/TextInput/textInput.module.css b/packages/venia-ui/lib/components/TextInput/textInput.module.css index 3aad86bcd7..b6dc9c6096 100644 --- a/packages/venia-ui/lib/components/TextInput/textInput.module.css +++ b/packages/venia-ui/lib/components/TextInput/textInput.module.css @@ -14,7 +14,7 @@ composes: h-[2.5rem] from global; composes: m-0 from global; composes: max-w-full from global; - composes: rounded-md from global; + composes: rounded-input from global; composes: w-full from global; font-size: 1rem; padding: calc(0.375rem - 1px) calc(0.625rem - 1px); diff --git a/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css b/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css index 992776e6f8..7c00774bbf 100644 --- a/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css @@ -59,6 +59,6 @@ composes: h-[6rem] from global; composes: items-center from global; composes: justify-center from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: text-brand-dark from global; } diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css index 0df36184fa..fed8c441bb 100644 --- a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css @@ -5,7 +5,7 @@ composes: gap-y-md from global; composes: grid from global; composes: p-sm from global; - composes: rounded-md from global; + composes: rounded-box from global; composes: md_p-md from global; } diff --git a/packages/venia-ui/lib/index.module.css b/packages/venia-ui/lib/index.module.css index c28d35b281..8b9190bce8 100755 --- a/packages/venia-ui/lib/index.module.css +++ b/packages/venia-ui/lib/index.module.css @@ -1,47 +1,35 @@ @import './tokens.module.css'; :global(*) { - /* composes: box-border from global; */ - box-sizing: border-box; + @apply box-border from global; } -/* TODO @TW: cannot compose */ :global(html) { - /* composes: text-[100%] from global; */ - font-size: 100%; - /* composes: text-normal from global; */ - font-weight: 400; - /* composes: leading-none from global; */ - line-height: 1; - /* composes: antialiased from global; */ - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + @apply text-[100%]; + @apply font-normal; + @apply leading-none; + @apply antialiased; } :global(html[data-scroll-lock='true']), :global(html[data-scroll-lock='true'] body) { - height: 100%; - overflow: hidden; - position: fixed; - width: 100%; + @apply h-full; + @apply overflow-hidden; + @apply fixed; + @apply w-full; } -/* TODO @TW: cannot compose */ :global(body), :global(button), :global(input), :global(select), :global(textarea) { - /* composes: text-gray-900 from global; */ - /* color: rgb(var(--venia-global-color-text)); */ - color: rgb(23 32 38); + @apply text-gray-900; } :global(body) { - /* composes: m-0 from global; */ - margin: 0; - /* composes: p-0 from global; */ - padding: 0; + @apply m-0; + @apply p-0; } :global(h1), @@ -50,76 +38,55 @@ :global(h4), :global(h5), :global(h6) { - /* composes: font-base from global; */ - font-size: 1rem; - /* composes: font-normal from global; */ - font-weight: 400; - /* composes: m-0 from global; */ - margin: 0; + @apply text-base; + @apply font-normal; + @apply m-0; } :global(h1) { - /* composes: text-xl from global; */ - font-size: 1.5rem; + @apply text-xl; } :global(h2) { - /* composes: text-lg from global; */ - font-size: 1.25rem; + @apply text-lg; } :global(a) { - /* composes: text-current from global; */ - color: currentColor; - /* composes: no-underline from global; */ - text-decoration: none; + @apply text-current; + @apply no-underline; } :global(p) { - /* composes: m-0 from global; */ - margin: 0; + @apply m-0; } :global(dl), :global(ol), :global(ul) { - /* composes: list-none from global; */ - list-style-type: none; - /* composes: m-0 from global; */ - margin: 0; - /* composes: p-0 from global; */ - padding: 0; + @apply list-none; + @apply m-0; + @apply p-0; } :global(dd), :global(dt) { - /* composes: m-0 from global; */ - margin: 0; + @apply m-0; } -/* TODO @TW: cannot compose */ :global(button) { - /* composes: bg-transparent from global; */ - background: none; - /* composes: border-0 from global; */ - border: 0; - /* composes: cursor-pointer from global; */ - cursor: pointer; - /* composes: text-[100%] from global; */ - font-size: 100%; - /* composes: p-0 from global; */ - padding: 0; - touch-action: manipulation; - /* composes: select-none from global; */ - user-select: none; - /* composes: appearance-none from global; */ - -webkit-appearance: none; + @apply bg-transparent; + @apply border-0; + @apply cursor-pointer; + @apply text-[100%]; + @apply p-0; + @apply touch-manipulation; + @apply select-none; + @apply appearance-none; } :global(button:disabled) { - /* composes: cursor-default from global; */ - cursor: default; - touch-action: none; + @apply cursor-default; + @apply touch-none; } :global(.braintree-sheet__content--form diff --git a/packages/venia-ui/lib/tokens.module.css b/packages/venia-ui/lib/tokens.module.css index 50dbc735d5..091c11d776 100644 --- a/packages/venia-ui/lib/tokens.module.css +++ b/packages/venia-ui/lib/tokens.module.css @@ -7,35 +7,35 @@ --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1); /* color */ - --venia-global-color-blue-100: 194 200 255; - --venia-global-color-blue-400: 71 139 255; + --venia-global-color-blue-100: var(--color-blue-100); + --venia-global-color-blue-400: var(--color-blue-400); /* --venia-global-color-blue-500: 51 109 255; */ /* --venia-global-color-blue-600: 41 84 255; */ - --venia-global-color-blue-700: 31 57 255; + --venia-global-color-blue-700: var(--color-blue-700); /* --venia-global-color-blue-800: 23 43 196; */ - --venia-global-color-gray-50: 255 255 255; + --venia-global-color-gray-50: var(--color-gray-50); /* --venia-global-color-gray-75: 250 250 250; */ - --venia-global-color-gray-100: 244 245 245; + --venia-global-color-gray-100: var(--color-gray-100); /* --venia-global-color-gray-200: 234 235 235; */ - --venia-global-color-gray-300: 161 151 145; - --venia-global-color-gray-400: 181 184 186; - --venia-global-color-gray-500: 149 154 157; - --venia-global-color-gray-600: 118 123 127; - --venia-global-color-gray-700: 84 93 99; + --venia-global-color-gray-300: var(--color-gray-300); + --venia-global-color-gray-400: var(--color-gray-400); + --venia-global-color-gray-500: var(--color-gray-500); + --venia-global-color-gray-600: var(--color-gray-600); + --venia-global-color-gray-700: var(--color-gray-700); /* --venia-global-color-gray-800: 51 63 71; */ - --venia-global-color-gray-900: 23 32 38; + --venia-global-color-gray-900: var(--color-gray-900); --venia-global-color-gray: var(--venia-global-color-gray-100); --venia-global-color-gray-dark: var(--venia-global-color-gray-300); --venia-global-color-gray-darker: var(--venia-global-color-gray-600); /* --venia-global-color-green-400: 51 171 132; */ - --venia-global-color-green-500: 45 157 120; + --venia-global-color-green-500: var(--color-green-600); /* --venia-global-color-green-600: 38 142 108; */ /* --venia-global-color-green-700: 18 128 92; */ - --venia-global-color-orange: 241 99 33; - --venia-global-color-red-400: 236 91 98; + --venia-global-color-orange: var(--color-orange); + --venia-global-color-red-400: var(--color-red-400); /* --venia-global-color-red-500: 227 72 80; */ /* --venia-global-color-red-600: 215 55 63; */ - --venia-global-color-red-700: 201 37 45; + --venia-global-color-red-700: var(--color-red-700); /* --venia-global-color-red-800: 161 30 36; */ --venia-global-color-teal: var(--venia-global-color-blue-400); /* --venia-global-color-teal-dark: var(--venia-global-color-blue-600); */ @@ -84,8 +84,8 @@ /* --venia-global-lineHeight-500: 2; */ /* dimensions */ - --venia-global-maxWidth: 1440px; - --venia-global-header-minHeight: 5rem; + --venia-global-maxWidth: theme('maxWidth.site'); + --venia-global-header-minHeight: theme('spacing.header'); } @media (max-width: 959px) { @@ -97,11 +97,11 @@ /* alias tokens */ :global(:root) { /* colors */ - --venia-brand-color-1-100: var(--venia-global-color-blue-100); + --venia-brand-color-1-100: var(--color-brand-100); /* --venia-brand-color-1-400: var(--venia-global-color-blue-400); */ /* --venia-brand-color-1-500: var(--venia-global-color-blue-500); */ /* --venia-brand-color-1-600: var(--venia-global-color-blue-600); */ - --venia-brand-color-1-700: var(--venia-global-color-blue-700); + --venia-brand-color-1-700: var(--color-brand-700); /* --venia-brand-color-1-800: var(--venia-global-color-blue-800); */ /* typography - heading */ From c0cfa921b61ca5c0d1e1f13f6b792c9215a423d6 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Wed, 29 Mar 2023 16:12:20 -0400 Subject: [PATCH 03/13] Fixing self reference in config, fixing broken index.module.css, fixing B7 issues --- packages/pwa-theme-venia/tailwind.preset.js | 13 +++++++------ .../components/CheckoutPage/checkoutPage.module.css | 5 ++--- .../SavedPaymentsPage/savedPaymentsPage.module.css | 4 +--- packages/venia-ui/lib/index.module.css | 2 +- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 01346aa087..7af6f8bc12 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -2,6 +2,7 @@ //const aspectRatioPlugin = require('@tailwindcss/aspect-ratio'); const { getColors, hexToRgb } = require('./lib/colors'); const corePlugin = require('./plugins'); +const defaultTheme = require('tailwindcss/defaultTheme'); const colors = { brand: { @@ -56,16 +57,16 @@ const extend = { success: theme('colors.green.600'), warning: theme('colors.yellow.500') }), - borderRadius: theme => ({ + borderRadius: { // Primitive radius1: '4px', radius2: '8px', radius3: '100%', - box: theme('borderRadius.md'), - button: theme('borderRadius.full'), - input: theme('borderRadius.md'), - badge: theme('borderRadius.md') - }), + box: defaultTheme.borderRadius.md, + button: defaultTheme.borderRadius.full, + input: defaultTheme.borderRadius.md, + badge: defaultTheme.borderRadius.md + }, borderWidth: { DEFAULT: '1px' }, diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css index 715118af82..0a82b88950 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css @@ -8,15 +8,14 @@ composes: lg_px-lg from global; } -/* prettier-ignore */ + .checkoutContent { composes: gap-xs from global; composes: grid from global; composes: grid-cols-1 from global; composes: lg_gap-md from global; - /* TODO @TW: review (B7) */ - composes: lg_grid-cols-[2fr,1fr] from global; + composes: lg_grid-cols-[2fr_1fr] from global; } .checkoutContent_hidden { diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css index 3bb4bf4705..339cb9ace3 100644 --- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css +++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css @@ -24,15 +24,13 @@ composes: lg_text-center from global; } -/* prettier-ignore */ .content { composes: gap-xs from global; composes: grid from global; composes: grid-cols-1 from global; grid-auto-rows: minmax(6rem, max-content); - /* TODO @TW: review (B7) */ - composes: lg_grid-cols-[1fr,1fr,1fr] from global; + composes: lg_grid-cols-[1fr_1fr_1fr] from global; } .noPayments { diff --git a/packages/venia-ui/lib/index.module.css b/packages/venia-ui/lib/index.module.css index 8b9190bce8..18221d2810 100755 --- a/packages/venia-ui/lib/index.module.css +++ b/packages/venia-ui/lib/index.module.css @@ -1,7 +1,7 @@ @import './tokens.module.css'; :global(*) { - @apply box-border from global; + @apply box-border; } :global(html) { From 301b2262df836fe3c32b7d5c622bdd9caec4a349 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 30 Mar 2023 13:03:12 -0400 Subject: [PATCH 04/13] WIP going through tailwind TODOs and changing to tailwind values, fixing index styles, adding more config values to fix TODOs --- .../lib/ContentTypes/Column/column.module.css | 4 +- .../DynamicBlock/dynamicBlock.module.css | 6 +-- .../lib/ContentTypes/Tabs/tabs.module.css | 5 +- packages/pwa-theme-venia/tailwind.preset.js | 51 ++++++++++++++++--- packages/pwa-theme-venia/tw-progress.txt | 2 +- .../Category/category.module.css | 4 +- .../components/Accordion/section.module.css | 10 +--- .../AccountMenu/accountMenu.module.css | 2 +- .../addToCartDialog.module.css | 10 ++-- .../lib/components/Button/button.module.css | 11 +--- .../components/ButtonGroup/button.module.css | 10 ++-- .../CartPage/GiftCards/giftCards.module.css | 15 ++---- .../CouponCode/couponCode.module.css | 15 ++---- .../ProductListing/product.module.css | 11 +--- .../components/CartPage/cartPage.module.css | 5 +- .../components/Checkbox/checkbox.module.css | 18 +++---- .../lib/components/Checkout/form.module.css | 6 +-- .../Checkout/paymentsForm.module.css | 3 +- .../AddressBook/addressBook.module.css | 5 +- .../orderConfirmationPage.module.css | 2 +- .../braintreeDropin.module.css | 12 ++--- .../paymentMethods.module.css | 4 +- .../components/CmsBlock/cmsBlock.module.css | 18 +++---- .../CreateAccount/createAccount.module.css | 5 +- .../components/Field/fieldIcons.module.css | 16 ++---- .../lib/components/Field/message.module.css | 6 +-- .../CurrentFilters/currentFilter.module.css | 4 +- .../CurrentFilters/currentFilters.module.css | 5 +- .../FilterModal/filterBlock.module.css | 6 +-- .../FilterModal/filterModal.module.css | 15 ++---- .../FilterSidebar/filterSidebar.module.css | 15 ++---- .../lib/components/Gallery/item.module.css | 5 +- .../Header/currencySwitcher.module.css | 26 ++++------ .../Header/storeSwitcher.module.css | 9 ++-- .../MegaMenu/megaMenuItem.module.css | 3 +- .../components/MiniCart/miniCart.module.css | 5 +- .../Newsletter/newsletter.module.css | 16 ++---- .../OrderDetails/shippingMethod.module.css | 5 +- .../OrderHistoryPage/orderRow.module.css | 8 +-- .../RadioGroup/radioGroup.module.css | 6 +-- .../SearchBar/autocomplete.module.css | 10 +--- .../SearchBar/suggestedCategories.module.css | 5 +- .../SearchBar/suggestedProducts.module.css | 5 +- .../SearchPage/searchPage.module.css | 9 +--- packages/venia-ui/lib/index.module.css | 2 +- packages/venia-ui/lib/tokens.module.css | 4 +- 46 files changed, 160 insertions(+), 259 deletions(-) diff --git a/packages/pagebuilder/lib/ContentTypes/Column/column.module.css b/packages/pagebuilder/lib/ContentTypes/Column/column.module.css index 045a6e72a9..772368b5c2 100644 --- a/packages/pagebuilder/lib/ContentTypes/Column/column.module.css +++ b/packages/pagebuilder/lib/ContentTypes/Column/column.module.css @@ -3,7 +3,7 @@ @media only screen and (max-width: 768px) { .root { - background-attachment: scroll !important; - flex-basis: 100%; + @apply !bg-scroll; + @apply basis-full; } } diff --git a/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css b/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css index c6c06034de..003e2d080b 100644 --- a/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css +++ b/packages/pagebuilder/lib/ContentTypes/DynamicBlock/dynamicBlock.module.css @@ -1,8 +1,8 @@ -.root:empty { - display: none; +.root { + composes: empty_hidden from global; } .root_inline { composes: root; - display: inline-block; + @apply inline-block; } diff --git a/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css b/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css index 5cc5e74983..5465e55d98 100644 --- a/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css +++ b/packages/pagebuilder/lib/ContentTypes/Tabs/tabs.module.css @@ -125,16 +125,13 @@ ul.navigation::-webkit-scrollbar { .panel { min-height: inherit; + composes: !empty_hidden from global; } .panelSelected { display: block; } -.panel:empty { - display: none !important; /* Necessary because of inline styles; to be fixed in MC-18326 */ -} - .content { border: var(--tabs-border-width) var(--tabs-border) var(--tabs-border-color); overflow: hidden; diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 7af6f8bc12..fa48bcc039 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -46,6 +46,7 @@ const extend = { error: theme('colors.red.400'), info: theme('colors.green.600'), input: theme('colors.gray.600'), + inputFocus: theme('colors.gray.700'), light: theme('colors.gray.100'), shaded: { 10: 'rgba(0, 0, 0, 0.1)', @@ -141,12 +142,14 @@ const extend = { modal: '360px', site: '1440px' }, - minHeight: { - auto: 'auto' - }, - minWidth: { - auto: 'auto' - }, + minHeight: theme => ({ + auto: 'auto', + 4: theme('spacing.4') + }), + minWidth: theme => ({ + auto: 'auto', + 32: theme('spacing.32') + }), // TODO @TW: review. Use the abstracted values in code. opacity: { disabled: 50, @@ -167,7 +170,12 @@ const extend = { DEFAULT: '1.5rem', filterSidebarWidth: '325px', full: '100%', - header: '5rem' + header: '5rem', + '7.5': '1.875rem', + '100vw': '100vw', + '75vw': '75vw', + '50vw': '50vw', + '25vw': '25vw' }, textColor: theme => ({ colorDefault: theme('colors.gray.900'), // TODO @TW naming collision: TW puts "fontSize" + "color" under "text-" prefix @@ -201,14 +209,41 @@ const theme = { // Override Tailwind defaults and preset config. screens: { xs: '480px', + '-xs': { + max: '479px' + }, sm: '640px', + '-sm': { + max: '639px' + }, md: '800px', + '-md': { + max: '799px' + }, lg: '960px', + '-lg': { + max: '959px' + }, xl: '1120px', + '-xl': { + max: '1119px' + }, '2xl': '1280px', + '-2xl': { + max: '-1279px' + }, '3xl': '1440px', + '-3xl': { + max: '-1439px' + }, '4xl': '1600px', - max: '1920px' + '-4xl': { + max: '1599px' + }, + max: '1920px', + '-max': { + max: '1920px' + } }, transitionDuration: { xs: '64ms', diff --git a/packages/pwa-theme-venia/tw-progress.txt b/packages/pwa-theme-venia/tw-progress.txt index b9bbc655b5..0fc48c8847 100644 --- a/packages/pwa-theme-venia/tw-progress.txt +++ b/packages/pwa-theme-venia/tw-progress.txt @@ -89,7 +89,7 @@ These files cannot be composed into because of global() or child selector usage: ✅ flex-direction ✅ flex-wrap ✅ flex -❌ flex-basis --- not in Tailwind (may need refactor) +✅ flex-basis ✅ flex-grow ✅ flex-shrink ✅ order diff --git a/packages/venia-ui/lib/RootComponents/Category/category.module.css b/packages/venia-ui/lib/RootComponents/Category/category.module.css index 1d4560ddb6..8ee0ec9db1 100644 --- a/packages/venia-ui/lib/RootComponents/Category/category.module.css +++ b/packages/venia-ui/lib/RootComponents/Category/category.module.css @@ -45,7 +45,7 @@ } .categoryInfo { - flex-basis: 100%; + composes: basis-full from global; composes: leading-tight from global; composes: max-w-[75vw] from global; composes: mx-0 from global; @@ -60,7 +60,7 @@ composes: flex from global; composes: justify-center from global; composes: pb-sm from global; - flex-basis: 100%; + composes: basis-full from global; composes: lg_justify-end from global; composes: lg_pb-0 from global; diff --git a/packages/venia-ui/lib/components/Accordion/section.module.css b/packages/venia-ui/lib/components/Accordion/section.module.css index b507ce7f3c..eb5ebaf0b2 100644 --- a/packages/venia-ui/lib/components/Accordion/section.module.css +++ b/packages/venia-ui/lib/components/Accordion/section.module.css @@ -4,21 +4,15 @@ composes: border-subtle from global; } -/* TODO @TW: cannot compose */ .root:last-of-type { - /* composes: border-b-0 from global; */ - border-bottom-width: 0; + @apply border-b-0; } .contents_container { composes: pb-sm from global; composes: pt-0 from global; composes: px-sm from global; -} - -/* TODO @TW: cannot compose */ -.contents_container:empty { - display: none; + composes: empty_hidden from global; } .contents_container_closed { diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css index e602bf070b..38c61e9053 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css @@ -12,7 +12,7 @@ visibility 192ms var(--venia-global-anim-out), /* Adding delay to move container off the screen after previous transitions happened */ left 0s 192ms; - width: calc(100vw - 2rem); /* TODO @TW: cannot compose */ + width: calc(100vw - theme(spacing.8)); } .root_closed { diff --git a/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css b/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css index 854256be76..ca1c1ba81d 100644 --- a/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css +++ b/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css @@ -26,14 +26,10 @@ .price { composes: font-semibold from global; -} -/* TODO @TW: cannot compose */ -.price:empty { - /* composes: bg-subtle from global; */ - background-color: rgb(var(--venia-global-color-gray)); - min-height: 1rem; - width: 4rem; + composes: empty_bg-subtle from global; + composes: empty_w-16 from global; + composes: empty_min-h-4 from global; } .optionTitle { diff --git a/packages/venia-ui/lib/components/Button/button.module.css b/packages/venia-ui/lib/components/Button/button.module.css index 798c04331f..5057cf0c23 100644 --- a/packages/venia-ui/lib/components/Button/button.module.css +++ b/packages/venia-ui/lib/components/Button/button.module.css @@ -30,21 +30,14 @@ composes: disabled_text-white from global; composes: focus_shadow-inputFocus from global; + + composes: hover_disabled_pointer-events-none from global; } .root:active { transition-duration: 128ms; } -/** - * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after - * being clicked it will be visually disabled. - */ -.root:hover:disabled { - /* TODO @TW: cannot compose. This may not be possible with two variants. */ - pointer-events: none; -} - .root_lowPriority { composes: root; diff --git a/packages/venia-ui/lib/components/ButtonGroup/button.module.css b/packages/venia-ui/lib/components/ButtonGroup/button.module.css index cd4541865f..12acf54578 100644 --- a/packages/venia-ui/lib/components/ButtonGroup/button.module.css +++ b/packages/venia-ui/lib/components/ButtonGroup/button.module.css @@ -34,15 +34,15 @@ transition-duration: 128ms; } -/* TODO @TW: cannot compose */ .root:nth-of-type(1) { - border-radius: 0.25rem 0 0 0.25rem; - margin-left: 0; + @apply ml-0; + @apply rounded-tl; + @apply rounded-bl; } -/* TODO @TW: cannot compose */ .root:nth-last-of-type(1) { - border-radius: 0 0.25rem 0.25rem 0; + @apply rounded-tr; + @apply rounded-br; } .content { diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css index 9021c1c5e0..f2cda01748 100644 --- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css +++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css @@ -41,24 +41,17 @@ .card_input_container { } -/* TODO @TW: cannot compose */ .card_input_container_error input { - /* composes: border-error from global; */ - border-color: rgb(var(--venia-global-color-red-400)); + @apply border-error; } -/* TODO @TW: cannot compose */ .card_input_container_error input:focus { - /* composes: border-gray-600 from global; */ - border-color: rgb(var(--venia-global-color-gray-600)); + @apply border-inputFocus; } -/* TODO @TW: cannot compose */ .card_input_container_error p { - /* composes: text-error from global; */ - color: rgb(var(--venia-global-color-error)); - /* composes: font-semibold from global; */ - font-weight: 600; + @apply text-error; + @apply font-semibold; } .cards_container { diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css index 4e4a002339..daa04877f7 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css @@ -16,24 +16,17 @@ } } -/* TODO @TW: cannot compose */ .entryFormError input { - /* composes: border-error from global; */ - border-color: rgb(var(--venia-global-color-red-400)); + @apply border-error; } -/* TODO @TW: cannot compose */ .entryFormError input:focus { - /* composes: border-gray-600 from global; */ - border-color: rgb(var(--venia-global-color-gray-600)); + @apply border-inputFocus; } -/* TODO @TW: cannot compose */ .entryFormError p { - /* composes: text-error from global; */ - color: rgb(var(--venia-global-color-error)); - /* composes: font-semibold from global; */ - font-weight: 600; + @apply text-error; + @apply font-semibold; } .errorContainer { diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css b/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css index 33734f27dd..b9ac6e9bc0 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css @@ -20,11 +20,7 @@ .errorText { composes: leading-normal from global; composes: text-error from global; -} - -/* TODO @TW: cannot compose */ -.errorText:empty { - display: none; + composes: empty_hidden from global; } .imageContainer { @@ -114,11 +110,8 @@ composes: text-error from global; composes: text-sm from global; grid-area: stock; -} -/* TODO @TW: cannot compose */ -.stockStatusMessage:empty { - display: none; + composes: empty_hidden from global; } .addToListButton { diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.module.css b/packages/venia-ui/lib/components/CartPage/cartPage.module.css index 2c22aced3d..fba2064af4 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.module.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.module.css @@ -28,9 +28,8 @@ composes: leading-tight from global; } -/* TODO @TW: cannot compose */ -.stockStatusMessageContainer:empty { - display: none; +.stockStatusMessageContainer { + composes: empty_hidden from global; } .items_container { diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.module.css b/packages/venia-ui/lib/components/Checkbox/checkbox.module.css index d1868f24f9..4c0a926896 100644 --- a/packages/venia-ui/lib/components/Checkbox/checkbox.module.css +++ b/packages/venia-ui/lib/components/Checkbox/checkbox.module.css @@ -26,6 +26,12 @@ /* TODO @TW: review, replaces input:disabled. Check if working. */ composes: disabled_cursor-not-allowed from global; + + composes: active_enabled_shadow-radioActive from global; + composes: active_enabled_outline-0 from global; + + composes: focus_enabled_shadow-radioFocus from global; + composes: focus_enabled_outline-0 from global; } .icon { @@ -47,24 +53,14 @@ } /* When the input is disabled, update the cursor on the sibling label element. */ -/* TODO @TW: cannot compose */ .input:disabled ~ .label { - cursor: default; + @apply cursor-default; } .input:checked:enabled + .icon { --stroke: var(--venia-brand-color-1-700); } -/* TODO @TW: cannot compose, needs "checked" variant enabled. Cannot combine variants. */ -.input:active:enabled, -.input:focus:enabled { - /* composes: active_shadow-radioActive from global; */ - /* composes: focus_shadow-radioFocus from global; */ - box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100)); - outline: none; -} - .input_shimmer { composes: h-[1.5rem] from global; composes: rounded from global; diff --git a/packages/venia-ui/lib/components/Checkout/form.module.css b/packages/venia-ui/lib/components/Checkout/form.module.css index d285018a46..38db25048a 100644 --- a/packages/venia-ui/lib/components/Checkout/form.module.css +++ b/packages/venia-ui/lib/components/Checkout/form.module.css @@ -31,11 +31,7 @@ /* The ::first-letter pseudo element below only works on block elements */ composes: block from global; composes: lowercase from global; -} - -/* TODO @TW: cannot compose */ -.paymentDisplaySecondary::first-letter { - composes: uppercase from global; + composes: first-letter_uppercase from global; } @keyframes enter { diff --git a/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css b/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css index 2359fd8cf1..41c991a66b 100644 --- a/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css +++ b/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css @@ -78,7 +78,6 @@ z-index: unset; } -/* TODO @TW: cannot compose */ :global .braintree-placeholder { - display: none; + @apply hidden; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css index ca9106d81b..b59de2e95f 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.module.css @@ -37,10 +37,9 @@ composes: lg_row-start-1 from global; } -@media (max-width: 479px) { - /* TODO @TW: cannot compose */ +@media screen(-xs) { .buttonContainer button { - min-width: 8rem; + @apply min-w-32; } } diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css index 47876037ca..6b1b14de28 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css @@ -11,7 +11,7 @@ composes: lg_gap-md from global; /* TODO @TW: review (B7) */ - composes: lg_grid-cols-[2fr,1fr] from global; + composes: lg_grid-cols-[2fr_1fr] from global; composes: lg_px-lg from global; composes: lg_py-md from global; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css index 6a1a7b1c72..21053fbd21 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css @@ -5,22 +5,22 @@ composes: text-error from global; } -/* TODO @TW: cannot compose */ div[data-braintree-id='card'] { - border: none; + @apply border-0; } -/* TODO @TW: cannot compose */ div[data-braintree-id='card-sheet-header'] { - display: none; + @apply hidden; } -/* TODO @TW: cannot compose */ div[class*='braintree-sheet__content--form'] { /** This is needed to override padding on the dropin component. If we use padding-top instead it just overrides the padding-top not whole padding. */ - padding: 1rem 0 0 0; + @apply pt-4; + @apply pr-0; + @apply pb-0; + @apply pl-0; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css index 97021147a1..81bb525be7 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css @@ -16,10 +16,8 @@ composes: pt-xs from global; } -/* TODO @TW: cannot compose */ .payment_method:last-of-type { - /* composes: border-b-0 from global; */ - border-bottom-width: 0; + @apply border-b-0; } .radio_label { diff --git a/packages/venia-ui/lib/components/CmsBlock/cmsBlock.module.css b/packages/venia-ui/lib/components/CmsBlock/cmsBlock.module.css index a50c047181..3d21b590ae 100644 --- a/packages/venia-ui/lib/components/CmsBlock/cmsBlock.module.css +++ b/packages/venia-ui/lib/components/CmsBlock/cmsBlock.module.css @@ -2,18 +2,16 @@ composes: m-xs from global; } -/* TODO @TW: cannot compose */ .content h2 { - margin-bottom: 2rem; - text-align: center; - text-transform: uppercase; + @apply mb-8; + @apply text-center; + @apply uppercase; } -/* TODO @TW: cannot compose */ .content img { - display: block; - height: auto; - max-height: 100%; - max-width: 100%; - width: auto; + @apply block; + @apply h-auto; + @apply w-auto; + @apply max-h-full; + @apply max-w-full; } diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.module.css b/packages/venia-ui/lib/components/CreateAccount/createAccount.module.css index 60b60148aa..72899c6340 100644 --- a/packages/venia-ui/lib/components/CreateAccount/createAccount.module.css +++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.module.css @@ -12,11 +12,8 @@ composes: p-xs from global; composes: rounded from global; composes: text-sm from global; -} -/* TODO @TW: cannot compose */ -.message:empty { - display: none; + composes: empty_hidden from global; } .actions { diff --git a/packages/venia-ui/lib/components/Field/fieldIcons.module.css b/packages/venia-ui/lib/components/Field/fieldIcons.module.css index 38eed45a52..ffe7d6cbcb 100644 --- a/packages/venia-ui/lib/components/Field/fieldIcons.module.css +++ b/packages/venia-ui/lib/components/Field/fieldIcons.module.css @@ -14,10 +14,9 @@ grid-row: input-start / input-end; } -/* TODO @TW: cannot compose */ .input > input { - padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem); - padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem); + padding-left: calc(theme(spacing[7.5]) * var(--iconsBefore) + theme(spacing[2.5])); + padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])); } .before, @@ -30,12 +29,7 @@ composes: pointer-events-none from global; composes: w-[2.5rem] from global; composes: z-foreground from global; -} - -/* TODO @TW: cannot compose */ -.before:empty, -.after:empty { - display: none; + composes: empty_hidden from global; } .before { @@ -46,8 +40,6 @@ grid-area: after; } -/* TODO @TW: cannot compose */ .before svg { - /* composes: stroke-gray-600 from global; */ - stroke: rgb(var(--venia-global-color-gray-600)); + @apply stroke-gray-600; } diff --git a/packages/venia-ui/lib/components/Field/message.module.css b/packages/venia-ui/lib/components/Field/message.module.css index 2b9fd6b91b..580f3d3757 100644 --- a/packages/venia-ui/lib/components/Field/message.module.css +++ b/packages/venia-ui/lib/components/Field/message.module.css @@ -6,11 +6,7 @@ composes: px-0.5 from global; composes: text-colorDefault from global; composes: text-sm from global; -} - -/* TODO @TW: cannot compose */ -.root:empty { - display: none; + composes: empty_hidden from global; } .root_error { diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css index 8cdb7e6dca..8650250811 100644 --- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css +++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css @@ -14,8 +14,6 @@ composes: text-white from global; } -/* TODO @TW: cannot compose */ .root svg { - /* composes: stroke-white from global; */ - stroke: rgb(var(--venia-global-color-gray-50)); + @apply stroke-white; } diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css index 91c506464c..f7b64b888a 100644 --- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css +++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.module.css @@ -2,11 +2,8 @@ composes: px-xs from global; composes: py-0 from global; composes: overflow-auto from global; -} -/* TODO @TW: cannot compose */ -.root:empty { - display: none; + composes: empty_hidden from global; } .item { diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.module.css b/packages/venia-ui/lib/components/FilterModal/filterBlock.module.css index 8ab124fc38..38707129ec 100644 --- a/packages/venia-ui/lib/components/FilterModal/filterBlock.module.css +++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.module.css @@ -22,9 +22,5 @@ } .list { -} - -/* TODO @TW: cannot compose */ -.list:empty { - display: none; + composes: empty_hidden from global; } diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.module.css b/packages/venia-ui/lib/components/FilterModal/filterModal.module.css index c0d5a23211..dd5c184d0c 100644 --- a/packages/venia-ui/lib/components/FilterModal/filterModal.module.css +++ b/packages/venia-ui/lib/components/FilterModal/filterModal.module.css @@ -64,12 +64,9 @@ composes: px-xs from global; } -/* TODO @TW: cannot compose */ .action button { - /* composes: text-sm from global; */ - font-size: 0.875rem; - /* composes: no-underline from global; */ - text-decoration: none; + @apply text-sm; + @apply no-underline; } .blocks { @@ -78,10 +75,8 @@ composes: px-xs from global; } -/* TODO @TW: cannot compose */ .blocks > li:last-child { - /* composes: border-b-2 from global; */ - /* composes: border-solid from global; */ - /* composes: border-subtle from global; */ - border-bottom: 2px solid rgb(var(--venia-global-color-border)); + @apply border-b-2; + @apply border-solid; + @apply border-subtle; } diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css index b3acab743f..b3ecb37c9e 100644 --- a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css +++ b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css @@ -35,12 +35,9 @@ composes: px-xs from global; } -/* TODO @TW: cannot compose */ .action button { - /* composes: text-sm from global; */ - font-size: 0.875rem; - /* composes: no-underline from global; */ - text-decoration: none; + @apply text-sm; + @apply no-underline; } .blocks { @@ -49,10 +46,8 @@ composes: px-xs from global; } -/* TODO @TW: cannot compose */ .blocks > li:last-child { - /* composes: border-b-2 from global; */ - /* composes: border-solid from global; */ - /* composes: border-subtle from global; */ - border-bottom: 2px solid rgb(var(--venia-global-color-border)); + @apply border-b-2; + @apply border-solid; + @apply border-subtle; } diff --git a/packages/venia-ui/lib/components/Gallery/item.module.css b/packages/venia-ui/lib/components/Gallery/item.module.css index ed3644397d..8f1f1cb005 100644 --- a/packages/venia-ui/lib/components/Gallery/item.module.css +++ b/packages/venia-ui/lib/components/Gallery/item.module.css @@ -45,11 +45,8 @@ composes: grid from global; composes: pl-2xs from global; grid-template-columns: auto auto; -} -/* TODO @TW: cannot compose */ -.actionsContainer:empty { - display: none; + composes: empty_hidden from global; } .name { diff --git a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css index c019233330..f824f798d9 100644 --- a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css @@ -84,35 +84,31 @@ composes: mr-2xs from global; } -/* TODO @TW: cannot compose */ .root:last-child:not(:only-child) { - padding-left: 0; - grid-auto-flow: column; + @apply pl-0; + @apply grid-flow-col; } -/* TODO @TW: cannot compose */ .root:last-child:not(:only-child)::before { - /* composes: border from global; */ - /* composes: border-solid from global; */ - /* composes: border-subtle from global; */ - border-left: 1px solid rgb(var(--venia-global-color-border)); + @apply border-l; + @apply border-solid; + @apply border-subtle; + @apply h-4; + @apply w-4; content: ''; - height: 1em; - width: 1rem; } -@media (max-width: 639px) { +@media screen(-sm) { .root:only-child { grid-column: 2; } - /* TODO @TW: cannot compose */ .root:last-child .menu { - right: 1rem; - left: auto; + @apply right-4; + @apply left-auto; } .menu_open { - transform: translate3d(0, -4px, 0); + @apply -translate-y-1; } } diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css index 5fae4c8ab6..a6764e7c35 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css @@ -95,17 +95,16 @@ grid-column: 2; } - /* TODO @TW: cannot compose */ .root:last-child .menu { - right: 1rem; - left: auto; + @apply right-4; + @apply left-auto; } .menu { - transform: translate3d(0, 8px, 0); + @apply translate-y-2; } .menu_open { - transform: translate3d(0, -4px, 0); + @apply -translate-y-1; } } diff --git a/packages/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css b/packages/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css index f47cea2da7..fe4a27b21a 100644 --- a/packages/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css +++ b/packages/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css @@ -24,8 +24,7 @@ composes: pl-2xs from global; } -/* TODO @TW: cannot compose */ .megaMenuItem:hover .megaMenuLink, .megaMenuItem:focus .megaMenuLink { - text-decoration: underline; + @apply underline; } diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css index 1800dc09a2..d6c51f371d 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css @@ -84,11 +84,8 @@ .stockStatusMessageContainer { composes: col-end-span2 from global; -} -/* TODO @TW: cannot compose */ -.stockStatusMessageContainer:empty { - display: none; + composes: empty_hidden from global; } .body { diff --git a/packages/venia-ui/lib/components/Newsletter/newsletter.module.css b/packages/venia-ui/lib/components/Newsletter/newsletter.module.css index bb2b8c50a1..c6cdc8dbb0 100644 --- a/packages/venia-ui/lib/components/Newsletter/newsletter.module.css +++ b/packages/venia-ui/lib/components/Newsletter/newsletter.module.css @@ -16,25 +16,19 @@ composes: relative from global; } -/* TODO @TW: cannot compose */ .form input { - /* TODO @TW: review */ - padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem); + padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) + theme(spacing[20])); } -@media (max-width: 799px) { - /* TODO @TW: cannot compose */ +@media screen(-md) { .form input { - /* TODO @TW: review */ - padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem); + padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])); } } -/* TODO @TW: cannot compose */ .form label { - position: absolute; - z-index: -1; - /* composes: z-behind from global; */ + @apply absolute; + @apply z-behind; } .buttonsContainer { diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css index 0adcddcfdd..a59e7e802d 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css @@ -8,9 +8,8 @@ composes: pb-1.5 from global; } -/* TODO @TW: cannot compose */ -.method:empty { - display: none; +.method { + composes: empty_hidden from global; } .tracking { diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css index d1358d293b..d86222d527 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css @@ -73,6 +73,7 @@ composes: grid from global; composes: overflow-hidden from global; composes: p-sm from global; + composes: max-lg_empty_hidden from global; composes: lg_border-b-0 from global; composes: lg_border-l from global; @@ -150,12 +151,7 @@ composes: hidden from global; } -@media (max-width: 959px) { - /* TODO @TW: cannot compose */ - .orderItemsContainer:empty { - display: none; - } - +@media screen(-lg) { .orderNumberContainer { grid-column: 1 / span 2; grid-row: 1; diff --git a/packages/venia-ui/lib/components/RadioGroup/radioGroup.module.css b/packages/venia-ui/lib/components/RadioGroup/radioGroup.module.css index ad764d8963..dc9cad170a 100644 --- a/packages/venia-ui/lib/components/RadioGroup/radioGroup.module.css +++ b/packages/venia-ui/lib/components/RadioGroup/radioGroup.module.css @@ -16,9 +16,5 @@ .message { composes: mt-xs from global; composes: text-colorDefault from global; -} - -/* TODO @TW: cannot compose */ -.message:empty { - display: none; + composes: empty_hidden from global; } diff --git a/packages/venia-ui/lib/components/SearchBar/autocomplete.module.css b/packages/venia-ui/lib/components/SearchBar/autocomplete.module.css index 65b6885ade..7929e6aa8a 100644 --- a/packages/venia-ui/lib/components/SearchBar/autocomplete.module.css +++ b/packages/venia-ui/lib/components/SearchBar/autocomplete.module.css @@ -44,19 +44,13 @@ composes: py-0 from global; composes: text-center from global; composes: text-subtle from global; -} -/* TODO @TW: cannot compose */ -.message:empty { - padding: 0; + composes: empty_hidden from global; } .suggestions { composes: gap-2xs from global; composes: grid from global; -} -/* TODO @TW: cannot compose */ -.suggestions:empty { - display: none; + composes: empty_hidden from global; } diff --git a/packages/venia-ui/lib/components/SearchBar/suggestedCategories.module.css b/packages/venia-ui/lib/components/SearchBar/suggestedCategories.module.css index 249fc55f30..19477a445f 100644 --- a/packages/venia-ui/lib/components/SearchBar/suggestedCategories.module.css +++ b/packages/venia-ui/lib/components/SearchBar/suggestedCategories.module.css @@ -5,9 +5,6 @@ composes: gap-3 from global; composes: grid from global; composes: pt-3 from global; -} -/* TODO @TW: cannot compose */ -.root:empty { - display: none; + composes: empty_hidden from global; } diff --git a/packages/venia-ui/lib/components/SearchBar/suggestedProducts.module.css b/packages/venia-ui/lib/components/SearchBar/suggestedProducts.module.css index 8480452285..cac04480c4 100644 --- a/packages/venia-ui/lib/components/SearchBar/suggestedProducts.module.css +++ b/packages/venia-ui/lib/components/SearchBar/suggestedProducts.module.css @@ -5,9 +5,6 @@ composes: gap-3 from global; composes: grid from global; composes: pt-3 from global; -} -/* TODO @TW: cannot compose */ -.products:empty { - display: none; + composes: empty_hidden from global; } diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.module.css b/packages/venia-ui/lib/components/SearchPage/searchPage.module.css index 7293205b32..528cabee2f 100644 --- a/packages/venia-ui/lib/components/SearchPage/searchPage.module.css +++ b/packages/venia-ui/lib/components/SearchPage/searchPage.module.css @@ -10,7 +10,7 @@ } .headerButtons { - flex-basis: 100%; + composes: basis-full from global; composes: flex from global; composes: justify-center from global; composes: mx-0 from global; @@ -42,12 +42,7 @@ composes: mt-10 from global; composes: lg_m-0 from global; -} - -@media (min-width: 960px) { - .searchInfo { - flex-basis: 100%; - } + composes: lg_basis-full from global; } .totalPages { diff --git a/packages/venia-ui/lib/index.module.css b/packages/venia-ui/lib/index.module.css index 18221d2810..ba73879561 100755 --- a/packages/venia-ui/lib/index.module.css +++ b/packages/venia-ui/lib/index.module.css @@ -7,7 +7,7 @@ :global(html) { @apply text-[100%]; @apply font-normal; - @apply leading-none; + @apply leading-normal; @apply antialiased; } diff --git a/packages/venia-ui/lib/tokens.module.css b/packages/venia-ui/lib/tokens.module.css index 091c11d776..368c8b2421 100644 --- a/packages/venia-ui/lib/tokens.module.css +++ b/packages/venia-ui/lib/tokens.module.css @@ -84,8 +84,8 @@ /* --venia-global-lineHeight-500: 2; */ /* dimensions */ - --venia-global-maxWidth: theme('maxWidth.site'); - --venia-global-header-minHeight: theme('spacing.header'); + --venia-global-maxWidth: theme(maxWidth.site); + --venia-global-header-minHeight: theme(spacing.header); } @media (max-width: 959px) { From 46cb4dc8a93eadb3f83a3bf2c79c2547ada36605 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Tue, 11 Apr 2023 12:41:45 -0400 Subject: [PATCH 05/13] Fixing priority issues, adding new theme values, fixing theme and tokens --- packages/pwa-theme-venia/tailwind.preset.js | 63 ++++++--- .../addToCartDialog.module.css | 2 +- .../AddressBookPage/addressCard.module.css | 7 +- .../Breadcrumbs/breadcrumbs.module.css | 1 - .../CartPage/GiftCards/giftCards.module.css | 4 +- .../EditModal/productForm.module.css | 2 +- .../lib/components/Checkout/form.module.css | 4 +- .../Checkout/paymentsForm.module.css | 2 +- .../AddressBook/addressCard.module.css | 4 +- .../GuestSignIn/guestSignIn.module.css | 20 +-- .../ShippingInformation/editModal.module.css | 8 +- .../shippingInformation.module.css | 12 +- .../ShippingMethod/shippingMethod.module.css | 2 - .../CheckoutPage/checkoutPage.module.css | 16 +-- .../lib/components/Dialog/dialog.module.css | 16 +-- .../lib/components/Field/message.module.css | 4 +- .../FilterModal/filterModal.module.css | 10 +- .../filterModalOpenButton.module.css | 4 +- .../forgotPasswordForm.module.css | 4 +- .../Gallery/addToCartButton.module.css | 8 +- .../Header/currencySwitcher.module.css | 21 ++- .../lib/components/Header/header.module.css | 4 +- .../Header/storeSwitcher.module.css | 12 +- .../lib/components/Image/image.module.css | 9 +- .../components/LegacyMiniCart/mask.module.css | 2 +- .../LegacyMiniCart/miniCart.module.css | 10 +- .../LinkButton/linkButton.module.css | 3 +- .../LoadingIndicator/indicator.module.css | 6 +- .../lib/components/Mask/mask.module.css | 12 +- .../components/MegaMenu/submenu.module.css | 16 +-- .../MiniCart/ProductList/item.module.css | 2 +- .../components/MiniCart/miniCart.module.css | 10 +- .../Navigation/navigation.module.css | 36 ++---- .../orderHistoryPage.module.css | 2 +- .../pageLoadingIndicator.module.css | 4 +- .../lib/components/Pagination/tile.module.css | 2 +- .../components/Password/password.module.css | 4 +- .../productFullDetail.module.css | 5 +- .../ProductImageCarousel/carousel.module.css | 3 +- .../ProductOptions/swatch.module.css | 19 ++- .../components/ProductOptions/tile.module.css | 17 ++- .../ProductSort/productSort.module.css | 2 +- .../quantityStepper.module.css | 14 +- .../components/RadioGroup/radio.module.css | 8 +- .../RichContent/richContent.module.css | 121 +++++++++--------- .../components/RichText/richText.module.css | 13 +- .../SavedPaymentsPage/creditCard.module.css | 20 +-- .../components/SearchBar/searchBar.module.css | 5 +- .../lib/components/Select/select.module.css | 2 +- .../lib/components/Shimmer/shimmer.module.css | 67 ++++------ .../lib/components/SignIn/signIn.module.css | 10 +- .../components/TextArea/textArea.module.css | 2 +- .../components/TextInput/textInput.module.css | 2 +- .../ToastContainer/toast.module.css | 8 +- .../WishlistPage/createWishlist.module.css | 4 +- .../WishlistPage/wishlist.module.css | 4 +- ...wishlistEditFavoritesListDialog.module.css | 2 +- .../WishlistPage/wishlistItem.module.css | 2 +- packages/venia-ui/lib/index.module.css | 2 +- packages/venia-ui/lib/tokens.module.css | 4 +- 60 files changed, 291 insertions(+), 393 deletions(-) diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index fa48bcc039..2b8e5f7b50 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -24,7 +24,8 @@ const extend = { stretch: 'stretch' }, animation: { - spin: 'spin 1920ms linear infinite' + spin: 'spin 1920ms linear infinite', + shimmer: 'shimmer 1s linear infinite forwards' }, backgroundColor: theme => ({ body: '#FFF', @@ -39,9 +40,20 @@ const extend = { swatch: theme('colors.gray.100'), 'swatch-selected': `linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent), ${theme( 'colors.gray.100' - )}` + )}`, + shimmer: `linear-gradient( + to right, + ${theme('colors.gray.50/0')} 0%, + ${theme('colors.gray.50')} 40%, + ${theme('colors.gray.50/0')} 80%, + ${theme('colors.gray.50/0')} 100% + )` + }), + backgroundSize: theme => ({ + maxSite: `${theme('maxWidth.site')} 100%` }), borderColor: theme => ({ + currentColor: 'currentColor', button: theme('colors.gray.600'), error: theme('colors.red.400'), info: theme('colors.green.600'), @@ -54,6 +66,8 @@ const extend = { 20: 'rgba(0, 0, 0, 0.2)' }, strong: theme('colors.gray.800'), + swatch: theme('colors.gray.400'), + base: theme('colors.gray.400'), subtle: theme('colors.gray.300'), success: theme('colors.green.600'), warning: theme('colors.yellow.500') @@ -83,6 +97,9 @@ const extend = { thin: `0 1px ${theme('colors.gray.300')}` }), colors: getColors(colors), + content: { + 'empty': '' + }, flex: { textInput: '0 0 100%' }, @@ -90,19 +107,19 @@ const extend = { sans: ['Muli', 'sans-serif'], serif: ['Source Serif Pro', 'serif'] }, - fontSize: { - '2xs': '0.6875rem', // 11px - xs: '0.75rem', // 12px - sm: '0.875rem', // 14px - base: '1rem', // 16px - lg: '1.25rem', // 18px - xl: '1.5rem', // 24px - '2xl': '2.125rem', // 34px - '3xl': '3rem', // 48px - '4xl': '3.75rem', // 60px - '5xl': '6rem', // 96px + fontSize: theme => ({ + '2xs': ['0.6875rem', '1.5'], // 11px + xs: ['0.75rem', '1.5'], // 12px + sm: ['0.875rem', '1.5'], // 14px + base: ['1rem', '1.5'], // 16px + lg: ['1.25rem', '1.5'], // 18px + xl: ['1.5rem', '1.5'], // 24px + '2xl': ['2.125rem', '1.5'], // 34px + '3xl': ['3rem', '1.5'], // 48px + '4xl': ['3.75rem', '1.5'], // 60px + '5xl': ['6rem', '1'], // 96px inherit: 'inherit' - }, + }), fontWeight: { DEFAULT: '300' }, @@ -132,6 +149,16 @@ const extend = { justifyContent: { stretch: 'stretch' }, + keyframes: { + shimmer: { + '0%': { + transform: 'translateX(-100%)' + }, + '100%': { + transform: 'translateX(100%)' + } + } + }, lineHeight: { DEFAULT: '1.5' }, @@ -183,9 +210,11 @@ const extend = { subtle: theme('colors.gray.600'), DEFAULT: theme('colors.gray.900') }), - width: { - fit: 'fit-content' - }, + width: theme => ({ + fit: 'fit-content', + swatch: '3.875rem', + maxSite: theme('maxWidth.site') + }), zIndex: { behind: '-1', surface: '1', diff --git a/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css b/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css index ca1c1ba81d..264a6c5bd2 100644 --- a/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css +++ b/packages/venia-ui/lib/components/AddToCartDialog/addToCartDialog.module.css @@ -44,7 +44,7 @@ .dialogHeaderText { composes: headerText from '../Dialog/dialog.module.css'; - composes: overflow-visible from global; + @apply overflow-visible; } .titleContainer { diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css index 87bc9609f5..917e49fdac 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css @@ -46,7 +46,7 @@ .confirmDeleteButton { composes: root_normalPriorityNegative from '../Button/button.module.css'; - composes: bg-white from global; + @apply bg-white; composes: order-first from global; composes: sm_order-1 from global; } @@ -54,7 +54,7 @@ .cancelDeleteButton { composes: root_lowPriority from '../Button/button.module.css'; - composes: bg-white from global; + @apply bg-white; } .contentContainer { @@ -93,7 +93,8 @@ .linkButton { composes: root from '../LinkButton/linkButton.module.css'; - composes: no-underline from global; + @apply no-underline; + @apply hover_underline; } .editButton { diff --git a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css index 799560899c..0d4dcf8ab7 100644 --- a/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css +++ b/packages/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css @@ -10,7 +10,6 @@ composes: pb-[1rem] from global; composes: text-sm from global; composes: whitespace-nowrap from global; - composes: -mb-[1rem] from global; } .text { diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css index f2cda01748..5b9392d0ff 100644 --- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css +++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css @@ -84,7 +84,7 @@ .applyLabel { composes: label from '../../Field/field.module.css'; - composes: hidden from global; + @apply hidden; - composes: lg_block from global; + @apply lg_block; } diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.module.css b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.module.css index 97d3d07c27..6b36780b3b 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.module.css +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.module.css @@ -37,7 +37,7 @@ composes: text-center from global; composes: top-2/4 from global; composes: z-mask from global; - transform: translateY(-50%); + composes: -translate-y-1/2 from global; } .dataError { diff --git a/packages/venia-ui/lib/components/Checkout/form.module.css b/packages/venia-ui/lib/components/Checkout/form.module.css index 38db25048a..b6fd9fff22 100644 --- a/packages/venia-ui/lib/components/Checkout/form.module.css +++ b/packages/venia-ui/lib/components/Checkout/form.module.css @@ -4,8 +4,8 @@ .body { composes: body from './flow.module.css'; - composes: gap-0 from global; - composes: p-0 from global; + @apply gap-0; + @apply p-0; } .footer { diff --git a/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css b/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css index 41c991a66b..c92dfc7347 100644 --- a/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css +++ b/packages/venia-ui/lib/components/Checkout/paymentsForm.module.css @@ -8,7 +8,7 @@ .body { composes: body from './flow.module.css'; - composes: h-[30rem] from global; + @apply h-[30rem]; } .footer { diff --git a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css index f68e8ef488..9f932ddca1 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressCard.module.css @@ -26,8 +26,8 @@ .root_selected { composes: root; - composes: border-brand-dark from global; - composes: cursor-default from global; + @apply border-brand-dark; + @apply cursor-default; } .root_updated { diff --git a/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css b/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css index 872637ce20..2173328016 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css @@ -9,7 +9,7 @@ .root_hidden { composes: root; - composes: hidden from global; + @apply hidden; } .header { @@ -30,26 +30,26 @@ .signInRoot { composes: root from '../../SignIn/signIn.module.css'; - composes: px-0 from global; - composes: py-xs from global; + @apply px-0; + @apply py-xs; - composes: lg_p-0 from global; + @apply lg_p-0; } .forgotPasswordRoot { composes: root from '../../ForgotPassword/forgotPassword.module.css'; - composes: px-0 from global; - composes: py-xs from global; + @apply px-0; + @apply py-xs; - composes: lg_p-0 from global; + @apply lg_p-0; } .createAccountRoot { composes: root from '../../CreateAccount/createAccount.module.css'; - composes: px-0 from global; - composes: py-xs from global; + @apply px-0; + @apply py-xs; - composes: lg_p-0 from global; + @apply lg_p-0; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css index b5f9a84624..59ea367b5c 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css @@ -28,13 +28,13 @@ composes: lg_top-[5vh] from global; } -@media (max-width: 959px) { +@media screen(-lg) { .root { transform: translate3d(100%, 0, 0); } } -@media (min-width: 960px) { +@media screen(lg) { /* TODO @TW: review */ .root { left: calc(50% - 370px); @@ -44,7 +44,7 @@ .root_open { composes: root; - composes: opacity-100 from global; + @apply opacity-100; composes: shadow-modal from global; transform: scale(1); transition-duration: 224ms; @@ -55,7 +55,7 @@ visibility: visible; } -@media (max-width: 959px) { +@media screen(-lg) { .root_open { composes: root; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css index 02ef92b017..ccf87195b4 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css @@ -1,5 +1,4 @@ .root { - /* TODO @TW: review (B6) */ composes: border-2 from global; composes: border-solid from global; composes: border-subtle from global; @@ -10,13 +9,10 @@ .root_editMode { composes: root; - /* TODO @TW: review (B6) */ - composes: border-0 from global; - composes: border-b-2 from global; - composes: border-solid from global; - composes: border-subtle from global; - composes: p-0 from global; - composes: rounded-none from global; + @apply border-0; + @apply border-b-2; + @apply p-0; + @apply rounded-none; } .root_updated { diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css index 74d1816ee2..1e0d66d779 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css @@ -12,8 +12,6 @@ composes: root; composes: border-2 from global; - composes: border-solid from global; - composes: border-subtle from global; } .editingHeading { diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css index 0a82b88950..9e86f670e7 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css @@ -21,7 +21,7 @@ .checkoutContent_hidden { composes: checkoutContent; - composes: hidden from global; + @apply hidden; } .heading_container { @@ -38,7 +38,7 @@ .cartLink { composes: root from '../LinkButton/linkButton.module.css'; - composes: text-inherit from global; + @apply text-inherit; } .stepper_heading { @@ -59,10 +59,10 @@ .payment_information_heading { composes: stepper_heading; - composes: border-b-0 from global; + @apply border-b-0; /* On mobile, order summary has a top border, so avoid doubling up. */ - composes: lg_border-b from global; + @apply lg_border-b; } .signInContainer { @@ -91,10 +91,10 @@ .signInButton { composes: root_normalPriority from '../Button/button.module.css'; - composes: min-h-auto from global; - composes: min-w-auto from global; - composes: px-md from global; - composes: py-1 from global; + @apply min-h-auto; + @apply min-w-auto; + @apply px-md; + @apply py-1; } .empty_cart_container { diff --git a/packages/venia-ui/lib/components/Dialog/dialog.module.css b/packages/venia-ui/lib/components/Dialog/dialog.module.css index 185995f0f0..f2ae2aadc7 100644 --- a/packages/venia-ui/lib/components/Dialog/dialog.module.css +++ b/packages/venia-ui/lib/components/Dialog/dialog.module.css @@ -11,28 +11,22 @@ composes: top-0 from global; composes: w-full from global; composes: z-dialog from global; + composes: invisible from global; transform: translate3d(-50%, 0, 0); transition: opacity 192ms var(--venia-global-anim-out), visibility 192ms var(--venia-global-anim-out), left 0s 192ms; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; - composes: lg_right-auto from global; } .root_open { composes: root; - composes: left-auto from global; - composes: opacity-100 from global; - - composes: lg_left-1/2 from global; + @apply left-auto; + @apply opacity-100; + @apply visible; - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + @apply lg_left-1/2; /* It animates to being open. */ transition: opacity 224ms var(--venia-global-anim-in), diff --git a/packages/venia-ui/lib/components/Field/message.module.css b/packages/venia-ui/lib/components/Field/message.module.css index 580f3d3757..8a5cb13bc4 100644 --- a/packages/venia-ui/lib/components/Field/message.module.css +++ b/packages/venia-ui/lib/components/Field/message.module.css @@ -12,6 +12,6 @@ .root_error { composes: root; - composes: font-semibold from global; - composes: text-error from global; + @apply font-semibold; + @apply text-error; } diff --git a/packages/venia-ui/lib/components/FilterModal/filterModal.module.css b/packages/venia-ui/lib/components/FilterModal/filterModal.module.css index dd5c184d0c..b6ed4d32a4 100644 --- a/packages/venia-ui/lib/components/FilterModal/filterModal.module.css +++ b/packages/venia-ui/lib/components/FilterModal/filterModal.module.css @@ -11,15 +11,12 @@ composes: top-0 from global; composes: w-full from global; composes: z-dialog from global; + composes: invisible from global; grid-template-rows: 1fr 7rem; transform: translate3d(-100%, 0, 0); transition-duration: 192ms; transition-timing-function: var(--venia-global-anim-out); transition-property: opacity, transform, visibility; - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .root_open { @@ -27,13 +24,10 @@ composes: opacity-100 from global; composes: shadow-modal from global; + composes: visible from global; transform: translate3d(0, 0, 0); transition-duration: 224ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .body { diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css index 9ab23247fe..495bc939c7 100644 --- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css +++ b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css @@ -1,7 +1,7 @@ .filterButton { composes: root_lowPriority from '../Button/button.module.css'; - composes: min-w-[6.25rem] from global; + @apply min-w-[6.25rem]; - composes: lg_hidden from global; + @apply lg_hidden; } diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css index cfa44a2981..b39c73e475 100644 --- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css +++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css @@ -16,11 +16,11 @@ .cancelButton { composes: root_lowPriority from '../../Button/button.module.css'; - composes: min-w-[9rem] from global; + @apply min-w-[9rem]; } .submitButton { composes: root_highPriority from '../../Button/button.module.css'; - composes: min-w-[9rem] from global; + @apply min-w-[9rem]; } diff --git a/packages/venia-ui/lib/components/Gallery/addToCartButton.module.css b/packages/venia-ui/lib/components/Gallery/addToCartButton.module.css index 0bce04ea35..20ec45c1c8 100644 --- a/packages/venia-ui/lib/components/Gallery/addToCartButton.module.css +++ b/packages/venia-ui/lib/components/Gallery/addToCartButton.module.css @@ -1,15 +1,13 @@ .root { composes: root_highPriority from '../Button/button.module.css'; - composes: min-w-[6.125rem] from global; + @apply min-w-[6.125rem]; composes: -ml-2xs from global; - composes: px-2xs from global; - composes: py-0 from global; + @apply py-0; composes: self-center from global; min-height: 2rem; - composes: sm_min-w-[8rem] from global; - /* composes: md_min-w-0 from global; */ + @apply sm_min-w-[8rem]; } .icon { diff --git a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css index f824f798d9..aa2a5044ac 100644 --- a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css @@ -35,6 +35,7 @@ composes: shadow-menu from global; composes: top-auto from global; composes: z-menu from global; + composes: invisible from global; transform: translate3d(0, 8px, 0); transition-duration: 192ms; transition-timing-function: var(--venia-global-anim-out); @@ -59,15 +60,12 @@ .menu_open { composes: menu; - composes: opacity-100 from global; + @apply opacity-100; composes: p-0 from global; + @apply visible; transform: translate3d(0, 4px, 0); transition-duration: 224ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .menuItem { @@ -87,15 +85,12 @@ .root:last-child:not(:only-child) { @apply pl-0; @apply grid-flow-col; -} -.root:last-child:not(:only-child)::before { - @apply border-l; - @apply border-solid; - @apply border-subtle; - @apply h-4; - @apply w-4; - content: ''; + @apply before_border-l; + @apply before_border-solid; + @apply before_border-base; + @apply before_h-4; + @apply before_w-4; } @media screen(-sm) { diff --git a/packages/venia-ui/lib/components/Header/header.module.css b/packages/venia-ui/lib/components/Header/header.module.css index cbd091bb82..e5c2b18bde 100755 --- a/packages/venia-ui/lib/components/Header/header.module.css +++ b/packages/venia-ui/lib/components/Header/header.module.css @@ -115,7 +115,7 @@ .input { composes: input from '../TextInput/textInput.module.css'; - composes: max-w-sm from global; + @apply max-w-sm; } .loader, @@ -145,9 +145,9 @@ .loaderBefore, .loaderAfter { + composes: content-empty from global; composes: absolute from global; composes: top-0 from global; - content: ''; } .loaderBefore { diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css index a6764e7c35..d17c09bc66 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css @@ -39,15 +39,12 @@ composes: top-auto from global; composes: w-max from global; composes: z-menu from global; + composes: invisible from global; transform: translate3d(0, -8px, 0); transition-duration: 192ms; transition-timing-function: var(--venia-global-anim-out); transition-property: opacity, transform, visibility; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; - composes: sm_bottom-auto from global; composes: sm_left-auto from global; composes: sm_right-xs from global; @@ -57,14 +54,11 @@ .menu_open { composes: menu; - composes: opacity-100 from global; + @apply opacity-100; + @apply visible; transform: translate3d(0, 4px, 0); transition-duration: 224ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .menuItem { diff --git a/packages/venia-ui/lib/components/Image/image.module.css b/packages/venia-ui/lib/components/Image/image.module.css index d2a87c9bb5..1e076df160 100644 --- a/packages/venia-ui/lib/components/Image/image.module.css +++ b/packages/venia-ui/lib/components/Image/image.module.css @@ -20,18 +20,13 @@ composes: absolute from global; composes: left-0 from global; composes: top-0 from global; - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + composes: visible from global; } .notLoaded { composes: loaded; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + @apply invisible; } .placeholder { diff --git a/packages/venia-ui/lib/components/LegacyMiniCart/mask.module.css b/packages/venia-ui/lib/components/LegacyMiniCart/mask.module.css index 5f95471c25..4c14dbff0b 100644 --- a/packages/venia-ui/lib/components/LegacyMiniCart/mask.module.css +++ b/packages/venia-ui/lib/components/LegacyMiniCart/mask.module.css @@ -1,5 +1,5 @@ .root_active { composes: root_active from '../Mask/mask.module.css'; - composes: opacity-25 from global; + @apply opacity-25; } diff --git a/packages/venia-ui/lib/components/LegacyMiniCart/miniCart.module.css b/packages/venia-ui/lib/components/LegacyMiniCart/miniCart.module.css index a6a35d6600..86f28f38e6 100644 --- a/packages/venia-ui/lib/components/LegacyMiniCart/miniCart.module.css +++ b/packages/venia-ui/lib/components/LegacyMiniCart/miniCart.module.css @@ -14,16 +14,13 @@ composes: top-0 from global; composes: w-full from global; composes: z-menu from global; + composes: invisible from global; box-shadow: -1px 0 rgb(var(--venia-global-color-border)); grid-template-rows: min-content 1fr; transform: translate3d(100%, 0, 0); transition-duration: 192ms; transition-property: opacity, transform, visibility; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } /* state: open */ @@ -32,11 +29,8 @@ composes: root; composes: opacity-100 from global; + @apply visible; transform: translate3d(0, 0, 0); transition-duration: 224ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } diff --git a/packages/venia-ui/lib/components/LinkButton/linkButton.module.css b/packages/venia-ui/lib/components/LinkButton/linkButton.module.css index 0ec57ffb2a..71efa64057 100644 --- a/packages/venia-ui/lib/components/LinkButton/linkButton.module.css +++ b/packages/venia-ui/lib/components/LinkButton/linkButton.module.css @@ -2,9 +2,8 @@ composes: root from '../clickable.module.css'; composes: font-semibold from global; - composes: leading-tight from global; + @apply leading-tight; composes: max-w-full from global; - composes: text-colorDefault from global; composes: text-brand-dark from global; composes: underline from global; diff --git a/packages/venia-ui/lib/components/LoadingIndicator/indicator.module.css b/packages/venia-ui/lib/components/LoadingIndicator/indicator.module.css index 42d637053b..eda26d3ef6 100644 --- a/packages/venia-ui/lib/components/LoadingIndicator/indicator.module.css +++ b/packages/venia-ui/lib/components/LoadingIndicator/indicator.module.css @@ -14,10 +14,10 @@ .global { composes: root; - composes: fixed from global; - composes: h-full from global; + @apply fixed; + @apply h-full; composes: left-0 from global; - composes: m-0 from global; + @apply m-0; composes: top-0 from global; composes: w-full from global; } diff --git a/packages/venia-ui/lib/components/Mask/mask.module.css b/packages/venia-ui/lib/components/Mask/mask.module.css index 3e2cdffb74..44ce77fe45 100644 --- a/packages/venia-ui/lib/components/Mask/mask.module.css +++ b/packages/venia-ui/lib/components/Mask/mask.module.css @@ -10,22 +10,16 @@ composes: top-0 from global; composes: w-full from global; composes: z-mask from global; + composes: invisible from global; transition-duration: 192ms; transition-property: opacity, visibility; transition-timing-function: linear; - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .root_active { composes: root; - composes: opacity-50 from global; + @apply opacity-50; + @apply visible; transition-duration: 224ms; - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } diff --git a/packages/venia-ui/lib/components/MegaMenu/submenu.module.css b/packages/venia-ui/lib/components/MegaMenu/submenu.module.css index 9bfe158650..0b1e0b5890 100644 --- a/packages/venia-ui/lib/components/MegaMenu/submenu.module.css +++ b/packages/venia-ui/lib/components/MegaMenu/submenu.module.css @@ -9,18 +9,18 @@ composes: right-0 from global; composes: top-full from global; box-shadow: 0 3px rgb(var(--venia-global-color-gray-100)); + + composes: before_content-empty from global; + composes: before_h-2.5 from global; + composes: before_left-0 from global; + composes: before_pointer-events-none from global; + composes: before_absolute from global; + composes: before_right-0 from global; + composes: before_top-0 from global; } -/* TODO @TW: cannot compose */ .submenu::before { box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100)); - content: ''; - height: 10px; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: 0; } .submenu_inactive { diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css index 347913ea79..ad36133de5 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css @@ -15,7 +15,7 @@ .root_disabled { composes: root; - composes: opacity-50 from global; + @apply opacity-50; } .thumbnailContainer { diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css index d6c51f371d..57268e8907 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css @@ -106,7 +106,7 @@ .quantity_loading { composes: quantity; - composes: opacity-50 from global; + @apply opacity-50; } .price { @@ -118,9 +118,9 @@ } .price_loading { - composes: quantity; + composes: price; - composes: opacity-50 from global; + @apply opacity-50; } .footer { @@ -143,8 +143,8 @@ .checkoutButton { composes: root_highPriority from '../Button/button.module.css'; - composes: bg-brand-dark from global; - composes: border-0 from global; + @apply bg-brand-dark; + @apply border-0; composes: font-bold from global; composes: m-auto from global; composes: w-[10rem] from global; diff --git a/packages/venia-ui/lib/components/Navigation/navigation.module.css b/packages/venia-ui/lib/components/Navigation/navigation.module.css index 4e8edf9f4d..376177c332 100644 --- a/packages/venia-ui/lib/components/Navigation/navigation.module.css +++ b/packages/venia-ui/lib/components/Navigation/navigation.module.css @@ -10,29 +10,23 @@ composes: top-0 from global; composes: w-full from global; composes: z-menu from global; + composes: invisible from global; grid-template-rows: auto 1fr auto; transform: translate3d(-100%, 0, 0); transition-duration: 192ms; transition-property: opacity, transform, visibility; transition-timing-function: var(--venia-global-anim-out); - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .root_open { composes: root; - composes: opacity-100 from global; + @apply opacity-100; composes: shadow-modal from global; + @apply visible; transform: translate3d(0, 0, 0); transition-duration: 384ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .header { @@ -53,25 +47,19 @@ composes: min-h-0 from global; composes: opacity-100 from global; composes: overflow-auto from global; + composes: visible from global; transition-duration: 192ms; transition-property: opacity, visibility; transition-timing-function: var(--venia-global-anim-out); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .body_masked { composes: body; - composes: opacity-0 from global; + @apply opacity-0; + @apply invisible; transition-duration: 384ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .footer { @@ -96,25 +84,19 @@ composes: overflow-auto from global; composes: right-0 from global; composes: top-lg from global; + composes: invisible from global; transform: translate3d(-100%, 0, 0); transition-duration: 192ms; transition-property: opacity, transform, visibility; transition-timing-function: var(--venia-global-anim-out); - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .modal_open { composes: modal; - composes: opacity-100 from global; + @apply opacity-100; + @apply visible; transform: translate3d(0, 0, 0); transition-duration: 384ms; transition-timing-function: var(--venia-global-anim-in); - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css index 643676790c..b62b05ec8e 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.module.css @@ -55,7 +55,7 @@ composes: root_highPriority from '../Button/button.module.css'; composes: h-[2rem] from global; - composes: min-w-[5rem] from global; + @apply min-w-[5rem]; composes: w-[5rem] from global; } diff --git a/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css b/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css index d1419a0476..0ad516fdcb 100644 --- a/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css +++ b/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css @@ -34,12 +34,12 @@ .indicator_loading { composes: indicator_off; - composes: opacity-100 from global; + @apply opacity-100; transform: translateX(-25%); } .indicator_done { composes: indicator_off; - composes: opacity-100 from global; + @apply opacity-100; transform: translateX(0%); } diff --git a/packages/venia-ui/lib/components/Pagination/tile.module.css b/packages/venia-ui/lib/components/Pagination/tile.module.css index bb058c93fe..32ba492bf3 100644 --- a/packages/venia-ui/lib/components/Pagination/tile.module.css +++ b/packages/venia-ui/lib/components/Pagination/tile.module.css @@ -13,5 +13,5 @@ .root_active { composes: root; - composes: border-currentColor from global; + @apply border-currentColor; } diff --git a/packages/venia-ui/lib/components/Password/password.module.css b/packages/venia-ui/lib/components/Password/password.module.css index eafa0a53ea..f150945212 100644 --- a/packages/venia-ui/lib/components/Password/password.module.css +++ b/packages/venia-ui/lib/components/Password/password.module.css @@ -8,8 +8,8 @@ --stroke: var(--venia-global-color-gray-500); composes: bg-transparent from global; - composes: border-none from global; - composes: border-0 from global; + @apply border-none; + @apply border-0; composes: min-w-0 from global; composes: p-0 from global; composes: rounded-none from global; diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css index 9454646356..1842a80c61 100644 --- a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css +++ b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css @@ -55,8 +55,7 @@ composes: grid from global; composes: items-center from global; composes: leading-normal from global; - composes: px-sm from global; - composes: py-xs from global; + @apply py-xs; grid-area: title; } @@ -170,7 +169,7 @@ } .related { - composes: border-b-0 from global; + @apply border-b-0; composes: section; grid-column: 1 / span 2; } diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css index 4da742f5f1..83225ab85a 100644 --- a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css +++ b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css @@ -72,11 +72,10 @@ composes: self-center from global; } -/* TODO @TW: cannot compose */ .nextButton:focus > .chevron, .previousButton:focus > .chevron { box-shadow: 0 0 4px 2px rgb(var(--venia-global-color-teal)); - border-radius: 0.5rem; + @apply rounded-lg; } .thumbnailList { diff --git a/packages/venia-ui/lib/components/ProductOptions/swatch.module.css b/packages/venia-ui/lib/components/ProductOptions/swatch.module.css index 611af04e0b..ce78b3f7ff 100644 --- a/packages/venia-ui/lib/components/ProductOptions/swatch.module.css +++ b/packages/venia-ui/lib/components/ProductOptions/swatch.module.css @@ -4,7 +4,7 @@ composes: root from './tile.module.css'; - composes: border-shaded-10 from global; + @apply border-shaded-10; composes: text-white from global; composes: w-[3rem] from global; background: var(--venia-swatch-bg); @@ -43,13 +43,12 @@ composes: opacity-40 from global; composes: border-2 from global; composes: border-solid from global; - composes: border-gray-400 from global; -} -.root_outOfStock:after, -.root_selected_outOfStock:after { - content: ''; - position: absolute; - border-top: 2px solid rgb(var(--venia-global-color-gray-400)); - width: 62px; - transform: rotate(-45deg); + @apply border-gray-400; + + composes: after_absolute from global; + composes: after_border-t-2 from global; + composes: after_border-solid from global; + composes: after_border-swatch from global; + composes: after_w-swatch from global; + composes: after_-rotate-45 from global; } diff --git a/packages/venia-ui/lib/components/ProductOptions/tile.module.css b/packages/venia-ui/lib/components/ProductOptions/tile.module.css index a830a2baad..8922435d78 100644 --- a/packages/venia-ui/lib/components/ProductOptions/tile.module.css +++ b/packages/venia-ui/lib/components/ProductOptions/tile.module.css @@ -34,14 +34,13 @@ composes: opacity-50 from global; composes: border-2 from global; composes: border-solid from global; - composes: border-gray-400 from global; + @apply border-gray-400; composes: text-gray-600 from global; -} -.root_outOfStock:after, -.root_selected_outOfStock:after { - content: ''; - position: absolute; - border-top: 2px solid rgb(var(--venia-global-color-gray-400)); - width: 62px; - transform: rotate(-45deg); + + composes: after_absolute from global; + composes: after_border-t-2 from global; + composes: after_border-solid from global; + composes: after_border-swatch from global; + composes: after_w-swatch from global; + composes: after_-rotate-45 from global; } diff --git a/packages/venia-ui/lib/components/ProductSort/productSort.module.css b/packages/venia-ui/lib/components/ProductSort/productSort.module.css index cb13d62469..7858e5f579 100644 --- a/packages/venia-ui/lib/components/ProductSort/productSort.module.css +++ b/packages/venia-ui/lib/components/ProductSort/productSort.module.css @@ -38,7 +38,7 @@ /* TODO @TW: review (C2). This is fragile to extend. */ composes: root_lowPriority from '../../components/Button/button.module.css'; - composes: min-w-[6.26rem] from global; + @apply min-w-[6.26rem]; composes: lg_border-2 from global; composes: lg_border-gray-500 from global; diff --git a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css index fb3756c795..e065e91f83 100644 --- a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css +++ b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css @@ -15,16 +15,8 @@ composes: justify-center from global; } -/* TODO @TW: cannot compose */ .label:not(:focus):not(:active) { - /* composes: sr-only from global; */ - position: absolute; - overflow: hidden; - width: 1px; - height: 1px; - clip: rect(0 0 0 0); - clip-path: inset(100%); - white-space: nowrap; + @apply sr-only; } .button { @@ -48,12 +40,10 @@ border-color: rgb(var(--stroke)); } -/* TODO @TW: cannot compose */ .button:disabled, .button:disabled:hover { --stroke: rgb(var(--venia-global-color-gray-400)); - /* composes: border-subtle from global; */ - border-color: rgb(var(--venia-global-color-gray-400)); + @apply border-base } .button_decrement { diff --git a/packages/venia-ui/lib/components/RadioGroup/radio.module.css b/packages/venia-ui/lib/components/RadioGroup/radio.module.css index 8d50187f52..afa48ef604 100644 --- a/packages/venia-ui/lib/components/RadioGroup/radio.module.css +++ b/packages/venia-ui/lib/components/RadioGroup/radio.module.css @@ -41,10 +41,8 @@ grid-area: input; } -/* TODO @TW: cannot compose */ .icon svg { - /* composes: stroke-gray-600 from global; */ - stroke: rgb(var(--venia-global-color-gray-600)); + @apply stroke-gray-600; } .label { @@ -53,10 +51,8 @@ grid-area: label; } -/* TODO @TW: cannot compose */ .input:checked + .icon svg { - /* composes: stroke-brand-base from global; */ - stroke: rgb(var(--venia-brand-color-1-700)); + @apply stroke-brand-base; } .input_shimmer { diff --git a/packages/venia-ui/lib/components/RichContent/richContent.module.css b/packages/venia-ui/lib/components/RichContent/richContent.module.css index 1eca0883af..e180f50da6 100644 --- a/packages/venia-ui/lib/components/RichContent/richContent.module.css +++ b/packages/venia-ui/lib/components/RichContent/richContent.module.css @@ -4,143 +4,136 @@ .root h4, .root h5, .root h6 { - margin-bottom: 0.5rem; - line-height: 1.25; + @apply mb-2; + @apply leading-tight; } .root h1 { - margin-top: 0.75rem; - font-size: 1.875rem; - font-weight: 400; + @apply mt-3; + @apply text-3xl/tight; + @apply font-normal; } .root h2 { - margin-top: 1rem; - font-size: 1.5rem; - font-weight: 400; + @apply mt-4; + @apply text-2xl/tight; + @apply font-normal; } .root h3 { - margin-top: 1rem; - font-size: 1.25rem; - font-weight: 400; + @apply mt-4; + @apply text-xl/tight; + @apply font-normal; } .root h4 { - margin-top: 1rem; - font-size: 1.125rem; - font-weight: 600; + @apply mt-4; + @apply text-lg/tight; + @apply font-semibold; } .root h5 { - margin-top: 1rem; - font-size: 1rem; - font-weight: 600; + @apply mt-4; + @apply text-base/tight; + @apply font-semibold; } .root h6 { - margin-top: 1rem; - font-size: 0.875rem; - font-weight: 600; + @apply mt-4; + @apply text-sm/tight; + @apply font-semibold; } .root p { - margin-bottom: 1rem; - line-height: 1.5; + @apply mb-4; + @apply leading-normal; } .root p:last-child { - margin-bottom: 0; + @apply mb-0; } .root img { - max-width: 100%; - margin: 1rem 0; + @apply max-w-full; + @apply my-4; + @apply mx-0; } .root ol, .root ul { - padding-left: 1.5rem; - margin-top: 1rem; - margin-bottom: 1rem; - line-height: 1.5; + @apply pl-6; + @apply my-4; + @apply leading-normal; } .root p + ol, .root p + ul { - margin-top: 0; + @apply mt-0; } -/* TODO @TW: cannot compose */ .root ol { - /* composes: list-decimal from global; */ - list-style-type: decimal; + @apply list-decimal; } -/* TODO @TW: cannot compose */ .root ul { - /* composes: list-disc from global; */ - list-style-type: disc; + @apply list-disc } .root a { - text-decoration: underline; + @apply underline; } .root blockquote { - margin: 1rem 0; - font-size: 1.25rem; - font-style: italic; + @apply my-4; + @apply mx-0; + @apply text-xl; + @apply italic; } .root table { - width: 100%; - text-align: left; + @apply w-full; + @apply text-left; } .root pre { - padding: 1rem; - /* composes: border from global; */ - /* composes: border-solid from global; */ - /* composes: border-subtle from global; */ - border: 1px solid rgb(var(--venia-global-color-border)); - /* composes: bg-gray-900 from global; */ - background: rgb(var(--venia-global-color-gray)); + @apply p-4; + @apply border; + @apply border-solid; + @apply border-subtle; + @apply bg-gray-900; } .root :global .cms-content-important { - padding: 1rem; - /* composes: border from global; */ - /* composes: border-solid from global; */ - /* composes: border-subtle from global; */ - border: 1px solid rgb(var(--venia-global-color-border)); - /* composes: bg-gray-900 from global; */ - background: rgb(var(--venia-global-color-gray)); - font-size: 1.125rem; + @apply p-4; + @apply border; + @apply border-solid; + @apply border-subtle; + @apply bg-gray-900; + @apply text-lg; } -@media (min-width: 800px) { +@media screen(md) { .root h1 { - font-size: 3rem; + @apply text-5xl/tight; } .root h2 { - font-size: 2.25rem; + @apply text-4xl/tight; } .root h3 { - font-size: 1.875rem; + @apply text-3xl/tight; } .root h4 { - font-size: 1.5rem; + @apply text-2xl/tight; } .root h5 { - font-size: 1.125rem; + @apply text-lg/tight; } .root h6 { - font-size: 1rem; + @apply text-base/tight; } } diff --git a/packages/venia-ui/lib/components/RichText/richText.module.css b/packages/venia-ui/lib/components/RichText/richText.module.css index e47ac70a74..fca4d7be3b 100644 --- a/packages/venia-ui/lib/components/RichText/richText.module.css +++ b/packages/venia-ui/lib/components/RichText/richText.module.css @@ -5,15 +5,14 @@ composes: text-sm from global; } -/* TODO @TW: cannot compose */ .root p { - margin: 0 0 1rem; + @apply m-0; + @apply mb-4; } -/* TODO @TW: cannot compose */ .root ul { - /* composes: list-disc from global; */ - list-style-type: disc; - margin: 0 0 1rem; - padding-left: 2.5rem; + @apply list-disc; + @apply m-0; + @apply mb-4; + @apply pl-10; } diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css index f2213549ee..b8bbadef30 100644 --- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css +++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css @@ -16,7 +16,7 @@ .root_active { composes: root; - composes: border-brand-dark from global; + @apply border-brand-dark; } .title { @@ -43,7 +43,7 @@ .deleteButton { composes: root from '../LinkButton/linkButton.module.css'; - composes: no-underline from global; + @apply no-underline; } .deleteConfirmationContainer { @@ -61,34 +61,28 @@ composes: rounded-box from global; composes: top-0 from global; composes: w-full from global; + composes: visible from global; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); transform: scaleX(1); transition-duration: 192ms; transition-timing-function: var(--venia-global-anim-in); transition-property: opacity, transform, visibility; - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; } .deleteConfirmationContainer_hidden { composes: deleteConfirmationContainer; - composes: opacity-0 from global; + @apply opacity-0; + @apply invisible; transform: scaleX(0); transition-delay: 0s, 192ms, 0s; transition-timing-function: var(--venia-global-anim-out); - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; } .confirmDeleteButton { composes: root_normalPriorityNegative from '../Button/button.module.css'; - composes: bg-white from global; + @apply bg-white; composes: order-1 from global; composes: order-first from global; } @@ -96,7 +90,7 @@ .cancelDeleteButton { composes: root_lowPriority from '../Button/button.module.css'; - composes: bg-white from global; + @apply bg-white; } .deleteText { diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css index 7bddc04d7f..d24cfe6dd7 100644 --- a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css +++ b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css @@ -16,10 +16,7 @@ composes: root; composes: z-dropdown from global; - - /* TODO @TW: review (B6) */ - /* composes: grid from global; */ - display: grid; + @apply grid; } .form { diff --git a/packages/venia-ui/lib/components/Select/select.module.css b/packages/venia-ui/lib/components/Select/select.module.css index d097c4c8b2..e28ad5aeeb 100644 --- a/packages/venia-ui/lib/components/Select/select.module.css +++ b/packages/venia-ui/lib/components/Select/select.module.css @@ -20,5 +20,5 @@ } .input_error { - composes: border-error from global; + @apply border-error; } diff --git a/packages/venia-ui/lib/components/Shimmer/shimmer.module.css b/packages/venia-ui/lib/components/Shimmer/shimmer.module.css index eca0f78a6a..a8fbd8d7d5 100644 --- a/packages/venia-ui/lib/components/Shimmer/shimmer.module.css +++ b/packages/venia-ui/lib/components/Shimmer/shimmer.module.css @@ -1,87 +1,64 @@ .root { - composes: bg-gray-100 from global; composes: inline-block from global; composes: overflow-hidden from global; composes: pointer-events-none from global; composes: relative from global; -} -/* TODO @TW: cannot compose */ -.root::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: var( - --venia-global-maxWidth - ); /* TODO @TW: review. this should use TW theme value "maxWidth.site" */ - height: 100%; - background-image: linear-gradient( - to right, - rgb(var(--venia-global-color-gray-50) / 0%) 0%, - rgb(var(--venia-global-color-gray-50)) 40%, - rgb(var(--venia-global-color-gray-50) / 0%) 80%, - rgb(var(--venia-global-color-gray-50) / 0%) 100% - ); - /* composes: bg-no-repeat from global; */ - background-repeat: none; - background-size: var(--venia-global-maxWidth) 100%; - -webkit-animation-name: shimmerAnimation; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - -webkit-animation-fill-mode: forwards; - will-change: transform; + composes: before_absolute from global; + composes: before_top-0 from global; + composes: before_left-0 from global; + composes: before_w-maxSite from global; + composes: before_h-full from global; + composes: before_bg-shimmer from global; + composes: before_bg-no-repeat from global; + composes: before_bg-maxSite from global; + composes: before_will-change-transform from global; + composes: before_animate-shimmer from global; } .root_rectangle { composes: root; - min-height: 1rem; + @apply bg-gray-100; + min-height: theme('fontSize.base'); } .root_button { composes: root from '../Button/button.module.css'; composes: root; - composes: border-0 from global; + @apply bg-gray-100; + @apply border-0; } .root_checkbox { composes: input_shimmer from '../Checkbox/checkbox.module.css'; composes: root; - composes: border-0 from global; + @apply bg-gray-100; + @apply border-0; } .root_radio { composes: input_shimmer from '../RadioGroup/radio.module.css'; composes: root; - composes: border-0 from global; + @apply bg-gray-100; + @apply border-0; } .root_textArea { composes: input_shimmer from '../TextArea/textArea.module.css'; composes: root; - min-height: 6.75rem; - composes: border-0 from global; + @apply bg-gray-100; + @apply border-0; } .root_textInput { composes: input_shimmer from '../TextInput/textInput.module.css'; composes: root; - composes: border-0 from global; -} - -@-webkit-keyframes shimmerAnimation { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: translateX(100%); - } + @apply bg-gray-100; + @apply border-0; } diff --git a/packages/venia-ui/lib/components/SignIn/signIn.module.css b/packages/venia-ui/lib/components/SignIn/signIn.module.css index 3f26f31276..9ef21e1a00 100644 --- a/packages/venia-ui/lib/components/SignIn/signIn.module.css +++ b/packages/venia-ui/lib/components/SignIn/signIn.module.css @@ -25,19 +25,13 @@ composes: h-full from global; composes: text-center from global; composes: w-full from global; - - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + composes: invisible from global; } .modal_active { composes: modal; composes: opacity-90 from global; - - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + @apply visible; } .buttonsContainer { diff --git a/packages/venia-ui/lib/components/TextArea/textArea.module.css b/packages/venia-ui/lib/components/TextArea/textArea.module.css index 1a8b692dd2..2c656e786e 100644 --- a/packages/venia-ui/lib/components/TextArea/textArea.module.css +++ b/packages/venia-ui/lib/components/TextArea/textArea.module.css @@ -1,7 +1,7 @@ .input { composes: input from '../Field/field.module.css'; - composes: h-auto from global; + @apply h-auto; composes: max-w-full from global; composes: min-w-full from global; composes: px-xs from global; diff --git a/packages/venia-ui/lib/components/TextInput/textInput.module.css b/packages/venia-ui/lib/components/TextInput/textInput.module.css index b6dc9c6096..49f346517c 100644 --- a/packages/venia-ui/lib/components/TextInput/textInput.module.css +++ b/packages/venia-ui/lib/components/TextInput/textInput.module.css @@ -7,7 +7,7 @@ .input_error { composes: input from '../Field/field.module.css'; - composes: border-error from global; + @apply border-error; } .input_shimmer { diff --git a/packages/venia-ui/lib/components/ToastContainer/toast.module.css b/packages/venia-ui/lib/components/ToastContainer/toast.module.css index e797aa122b..67fc36eb33 100644 --- a/packages/venia-ui/lib/components/ToastContainer/toast.module.css +++ b/packages/venia-ui/lib/components/ToastContainer/toast.module.css @@ -44,7 +44,7 @@ composes: border-b-4 from global; composes: border-solid from global; - composes: border-info from global; + @apply border-info; } .infoToast > .icon { @@ -56,7 +56,7 @@ composes: border-b-4 from global; composes: border-solid from global; - composes: border-warning from global; + @apply border-warning; } .warningToast > .icon { @@ -68,7 +68,7 @@ composes: border-b-4 from global; composes: border-solid from global; - composes: border-error from global; + @apply border-error; } .errorToast > .icon { @@ -80,7 +80,7 @@ composes: border-b-4 from global; composes: border-solid from global; - composes: border-success from global; + @apply border-success; } .successToast > .icon { diff --git a/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css b/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css index 7c00774bbf..8f38bc903b 100644 --- a/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/createWishlist.module.css @@ -18,13 +18,13 @@ .cancelButton { composes: root_lowPriority from '../Button/button.module.css'; - composes: min-w-[9rem] from global; + @apply min-w-[9rem]; } .confirmButton { composes: root_highPriority from '../Button/button.module.css'; - composes: min-w-[9rem] from global; + @apply min-w-[9rem]; } .contents { diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css index fed8c441bb..36a1053139 100644 --- a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css @@ -69,8 +69,8 @@ .loadMore { composes: root_lowPriority from '../Button/button.module.css'; - composes: block from global; - composes: min-w-[20rem] from global; + @apply block; + @apply min-w-[20rem]; composes: mx-auto from global; composes: my-md from global; } diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css b/packages/venia-ui/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css index 88a6ccf2cb..2a926bbe5b 100644 --- a/packages/venia-ui/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css @@ -5,7 +5,7 @@ .cancelButton { composes: root_lowPriority from '../Button/button.module.css'; - composes: min-w-[9rem] from global; + @apply min-w-[9rem]; } .confirmButton { diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlistItem.module.css b/packages/venia-ui/lib/components/WishlistPage/wishlistItem.module.css index 1938ef8561..5c31a8b77b 100644 --- a/packages/venia-ui/lib/components/WishlistPage/wishlistItem.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/wishlistItem.module.css @@ -48,7 +48,7 @@ composes: root_highPriority from '../Button/button.module.css'; composes: justify-self-start from global; - composes: min-w-full from global; + @apply min-w-full; composes: mt-1 from global; composes: xs_min-w-auto from global; diff --git a/packages/venia-ui/lib/index.module.css b/packages/venia-ui/lib/index.module.css index ba73879561..18221d2810 100755 --- a/packages/venia-ui/lib/index.module.css +++ b/packages/venia-ui/lib/index.module.css @@ -7,7 +7,7 @@ :global(html) { @apply text-[100%]; @apply font-normal; - @apply leading-normal; + @apply leading-none; @apply antialiased; } diff --git a/packages/venia-ui/lib/tokens.module.css b/packages/venia-ui/lib/tokens.module.css index 368c8b2421..09a0a37c91 100644 --- a/packages/venia-ui/lib/tokens.module.css +++ b/packages/venia-ui/lib/tokens.module.css @@ -25,8 +25,8 @@ /* --venia-global-color-gray-800: 51 63 71; */ --venia-global-color-gray-900: var(--color-gray-900); --venia-global-color-gray: var(--venia-global-color-gray-100); - --venia-global-color-gray-dark: var(--venia-global-color-gray-300); - --venia-global-color-gray-darker: var(--venia-global-color-gray-600); + --venia-global-color-gray-dark: var(--venia-global-color-gray-400); + --venia-global-color-gray-darker: var(--venia-global-color-gray-700); /* --venia-global-color-green-400: 51 171 132; */ --venia-global-color-green-500: var(--color-green-600); /* --venia-global-color-green-600: 38 142 108; */ From 793fdcf25c5a64c149f9f0e89bd58b9fc96e7093 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 12:09:46 -0400 Subject: [PATCH 06/13] Changing all media queries to use config screen sizes, adding new screen sizes to config --- .../src/components/summary.module.css | 2 +- packages/pwa-theme-venia/tailwind.preset.js | 22 +++++++++++++++++-- packages/venia-concept/package.json | 3 ++- .../editForm.module.css | 2 +- .../AddressBookPage/addEditDialog.module.css | 2 +- .../addressBookPage.module.css | 2 +- .../AddressBookPage/addressCard.module.css | 2 +- .../CartPage/GiftCards/giftCards.module.css | 2 +- .../CouponCode/couponCode.module.css | 2 +- .../ShippingMethods/shippingForm.module.css | 2 +- .../ProductListing/product.module.css | 4 ++-- .../components/CartPage/cartPage.module.css | 2 +- .../AddressForm/customerForm.module.css | 2 +- .../AddressForm/guestForm.module.css | 2 +- .../CheckoutPage/checkoutPage.module.css | 2 +- .../contactPage.shimmer.module.css | 2 +- .../lib/components/Dialog/dialog.module.css | 2 +- .../components/ErrorView/errorView.module.css | 2 +- .../lib/components/Field/field.module.css | 1 + .../lib/components/Footer/footer.module.css | 4 ++-- .../lib/components/Gallery/gallery.module.css | 2 +- .../Header/currencySwitcher.module.css | 2 +- .../Header/onlineIndicator.module.css | 4 ++-- .../Header/storeSwitcher.module.css | 2 +- .../components/HomePage/homePage.module.css | 20 ++++++++--------- .../lib/components/Main/main.module.css | 6 ++--- .../OrderDetails/item.module.css | 2 +- .../OrderDetails/orderDetails.module.css | 2 +- .../OrderHistoryPage/orderRow.module.css | 2 +- .../productFullDetail.module.css | 4 ++-- .../ProductImageCarousel/carousel.module.css | 2 +- .../ProductImageCarousel/thumbnail.module.css | 2 +- .../SavedPaymentsPage/creditCard.module.css | 2 +- .../WishlistPage/wishlist.module.css | 2 +- packages/venia-ui/lib/tokens.module.css | 2 +- 35 files changed, 70 insertions(+), 50 deletions(-) diff --git a/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css b/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css index 704543db52..c52e6a2daa 100644 --- a/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css +++ b/packages/extensions/venia-sample-payments-checkmo/src/components/summary.module.css @@ -35,7 +35,7 @@ .payment_type { } -@media (max-width: 960px) { +@media screen(-lg) { .edit_text { display: none; } diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 2b8e5f7b50..04a730ac74 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -245,17 +245,35 @@ const theme = { '-sm': { max: '639px' }, + hsm: { + raw: '(min-height: 640px)' + }, + '-hsm': { + raw: '(max-height: 639px)' + }, md: '800px', '-md': { max: '799px' }, + hmd: { + raw: '(min-height: 800px)' + }, + '-hmd': { + raw: '(max-height: 799px)' + }, lg: '960px', '-lg': { max: '959px' }, - xl: '1120px', + hlg: { + raw: '(min-height: 960px)' + }, + '-hlg': { + raw: '(max-height: 959px)' + }, + xl: '1024px', '-xl': { - max: '1119px' + max: '1023px' }, '2xl': '1280px', '-2xl': { diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json index d56c29c715..f585f7c758 100644 --- a/packages/venia-concept/package.json +++ b/packages/venia-concept/package.json @@ -35,7 +35,8 @@ }, "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme", "dependencies": { - "@magento/pwa-buildpack": "~11.4.1" + "@magento/pwa-buildpack": "~11.4.1", + "@magento/venia-sample-payments-checkmo": "0.0.10" }, "devDependencies": { "@adobe/apollo-link-mutation-queue": "~1.0.2", diff --git a/packages/venia-ui/lib/components/AccountInformationPage/editForm.module.css b/packages/venia-ui/lib/components/AccountInformationPage/editForm.module.css index 5429716924..cb15f3b3ff 100644 --- a/packages/venia-ui/lib/components/AccountInformationPage/editForm.module.css +++ b/packages/venia-ui/lib/components/AccountInformationPage/editForm.module.css @@ -28,7 +28,7 @@ composes: pt-xs from global; } -@media (max-width: 959px) { +@media screen(-lg) { .firstname, .lastname, .password, diff --git a/packages/venia-ui/lib/components/AddressBookPage/addEditDialog.module.css b/packages/venia-ui/lib/components/AddressBookPage/addEditDialog.module.css index 36f08f9561..b373458e21 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addEditDialog.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addEditDialog.module.css @@ -11,7 +11,7 @@ composes: lg_col-end-span2 from global; } -@media (min-width: 960px) { +@media screen(lg) { .lastname, .country, .default_address_check { diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css index e14529e4a8..4605ffd2c8 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.module.css @@ -33,7 +33,7 @@ composes: border-dashed from global; composes: border-subtle from global; composes: font-semibold from global; - composes: rounded-button from global; + composes: rounded-box from global; composes: text-brand-dark from global; composes: text-sm from global; transition: border-color 384ms var(--venia-global-anim-standard); diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css index 917e49fdac..2be67eaa3c 100644 --- a/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css +++ b/packages/venia-ui/lib/components/AddressBookPage/addressCard.module.css @@ -37,7 +37,7 @@ composes: sm_py-5 from global; } -@media (min-width: 640px) { +@media screen(sm) { .confirmDeleteContainer { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css index 5b9392d0ff..7535575102 100644 --- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css +++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css @@ -30,7 +30,7 @@ composes: lg_grid-cols-autoLast from global; } -@media (min-width: 960px) { +@media screen(lg) { .card { grid-template-areas: 'card_entry apply_button' diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css index daa04877f7..323d9c1e3a 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css @@ -7,7 +7,7 @@ } /* on mobile... */ -@media (max-width: 959px) { +@media screen(-lg) { .entryForm, .entryFormError { /* switch to rows. */ diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css index c0f6efa2b0..d217f9dca6 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.module.css @@ -23,7 +23,7 @@ composes: justify-self-start from global; } -@media (max-width: 639px) { +@media screen(-sm) { .root { /* Only one column in mobile view. */ grid-template-columns: 100%; diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css b/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css index b9ac6e9bc0..b73eb0d2f5 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/product.module.css @@ -49,7 +49,7 @@ composes: sm_grid from global; } -@media (min-width: 640px) { +@media screen(sm) { .details { grid-area: details; grid-template-areas: @@ -130,7 +130,7 @@ composes: hidden from global; } -@media (max-width: 639px) { +@media screen(-sm) { .name, .options, .price, diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.module.css b/packages/venia-ui/lib/components/CartPage/cartPage.module.css index fba2064af4..1e4d7f688f 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.module.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.module.css @@ -55,7 +55,7 @@ composes: top-[5.5rem] from global; /* TODO @TW: review */ } -@media (max-width: 959px) { +@media screen(-lg) { .body { /* Only one column in mobile view. */ grid-template-columns: 100%; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css index 6eef77e409..fb3498ab87 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css @@ -42,7 +42,7 @@ composes: p-xs from global; } -@media (max-width: 959px) { +@media screen(-lg) { .firstname { grid-column: 1 / span 2; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css index f36f21daf5..1ee531b4f2 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css @@ -36,7 +36,7 @@ composes: p-xs from global; } -@media (max-width: 959px) { +@media screen(-lg) { .firstname { grid-column: 1 / span 2; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css index 9e86f670e7..b3ad920654 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css @@ -132,7 +132,7 @@ composes: lg_top-[6rem] from global; } -@media (min-width: 960px) { +@media screen(lg) { .summaryContainer { grid-column: 2 / span 1; grid-row: 2 / span 3; diff --git a/packages/venia-ui/lib/components/ContactPage/contactPage.shimmer.module.css b/packages/venia-ui/lib/components/ContactPage/contactPage.shimmer.module.css index 4ff882f8c1..80a9861fb3 100644 --- a/packages/venia-ui/lib/components/ContactPage/contactPage.shimmer.module.css +++ b/packages/venia-ui/lib/components/ContactPage/contactPage.shimmer.module.css @@ -20,7 +20,7 @@ height: 500px; } -@media only screen and (min-width: 769px) { +@media screen(md) { .shimmerBanner { height: 300px; } diff --git a/packages/venia-ui/lib/components/Dialog/dialog.module.css b/packages/venia-ui/lib/components/Dialog/dialog.module.css index f2ae2aadc7..3e28ac2c54 100644 --- a/packages/venia-ui/lib/components/Dialog/dialog.module.css +++ b/packages/venia-ui/lib/components/Dialog/dialog.module.css @@ -167,7 +167,7 @@ * dialogs slide out from the right. */ -@media (max-width: 959px) { +@media screen(-lg) { .root { /* The Dialog starts off-screen on the right. */ transform: translate3d(100%, 0, 0); diff --git a/packages/venia-ui/lib/components/ErrorView/errorView.module.css b/packages/venia-ui/lib/components/ErrorView/errorView.module.css index 834c0eb04a..76e37b7ccb 100644 --- a/packages/venia-ui/lib/components/ErrorView/errorView.module.css +++ b/packages/venia-ui/lib/components/ErrorView/errorView.module.css @@ -37,7 +37,7 @@ .actionsContainer { } -@media (max-width: 639px) { +@media screen(-sm) { .root { background-image: var(--mobileBackgroundImageUrl); /* two row grid because the "hangers" are on the top of the page */ diff --git a/packages/venia-ui/lib/components/Field/field.module.css b/packages/venia-ui/lib/components/Field/field.module.css index 4f1cb29f8a..243bd26234 100644 --- a/packages/venia-ui/lib/components/Field/field.module.css +++ b/packages/venia-ui/lib/components/Field/field.module.css @@ -47,4 +47,5 @@ composes: font-normal from global; composes: text-sm from global; composes: text-subtle from global; + composes: leading-none from global; } diff --git a/packages/venia-ui/lib/components/Footer/footer.module.css b/packages/venia-ui/lib/components/Footer/footer.module.css index d941b0d6f7..016a1704fe 100755 --- a/packages/venia-ui/lib/components/Footer/footer.module.css +++ b/packages/venia-ui/lib/components/Footer/footer.module.css @@ -99,13 +99,13 @@ composes: lg_text-left from global; } -@media (max-width: 959px) { +@media screen(-lg) { .branding { grid-template-areas: 'c' 'b' 'a'; } } -@media (min-width: 960px) { +@media screen(lg) { .branding { grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); } diff --git a/packages/venia-ui/lib/components/Gallery/gallery.module.css b/packages/venia-ui/lib/components/Gallery/gallery.module.css index 1476a352c1..e622d7ea2a 100644 --- a/packages/venia-ui/lib/components/Gallery/gallery.module.css +++ b/packages/venia-ui/lib/components/Gallery/gallery.module.css @@ -15,7 +15,7 @@ grid-template-columns: repeat(3, 1fr); } -@media (max-width: 639px) { +@media screen(-sm) { .items { grid-template-columns: repeat(2, 1fr); } diff --git a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css index aa2a5044ac..9b3a1c121d 100644 --- a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css @@ -51,7 +51,7 @@ composes: sm_top-md from global; } -@media (min-width: 640px) { +@media screen(sm) { .menu { transform: translate3d(0, -8px, 0); } diff --git a/packages/venia-ui/lib/components/Header/onlineIndicator.module.css b/packages/venia-ui/lib/components/Header/onlineIndicator.module.css index 2d4765dee3..c1f9ba4b48 100644 --- a/packages/venia-ui/lib/components/Header/onlineIndicator.module.css +++ b/packages/venia-ui/lib/components/Header/onlineIndicator.module.css @@ -12,13 +12,13 @@ composes: sm_ml-10 from global; } -@media (min-width: 640px) { +@media screen(sm) { .root { grid-column: 3 / 4; } } -@media (min-width: 960px) { +@media screen(lg) { .root { grid-column: 2 / 3; } diff --git a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css index d17c09bc66..0339783b0c 100644 --- a/packages/venia-ui/lib/components/Header/storeSwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/storeSwitcher.module.css @@ -84,7 +84,7 @@ * Mobile-specific styles. */ -@media (max-width: 639px) { +@media screen(-sm) { .root:only-child { grid-column: 2; } diff --git a/packages/venia-ui/lib/components/HomePage/homePage.module.css b/packages/venia-ui/lib/components/HomePage/homePage.module.css index aa391f13a6..fbb6c663a5 100644 --- a/packages/venia-ui/lib/components/HomePage/homePage.module.css +++ b/packages/venia-ui/lib/components/HomePage/homePage.module.css @@ -60,7 +60,7 @@ z-index: 1; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-slider ~ div) { grid-auto-flow: row; grid-template-columns: 100%; @@ -121,7 +121,7 @@ padding: 0 0 6rem !important; } -@media (max-width: 1280px) { +@media screen(-2xl) { :global(.venia-home-slider .slick-slider) { min-height: 548px !important; } @@ -131,7 +131,7 @@ } } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-slider .slick-slide > div > div > div) { align-content: end; background-position: right center !important; @@ -230,7 +230,7 @@ width: 100% !important; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-callout) { justify-self: center; max-width: 640px; @@ -254,7 +254,7 @@ width: 16rem; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-callout-text) { transform: translate3d(0, 0.5rem, 0); } @@ -288,7 +288,7 @@ width: 100% !important; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-banner-a-content) { grid-column: 1 / span 1; padding-top: 0 !important; @@ -324,7 +324,7 @@ width: 100% !important; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-banner-a-image) { background-position: center bottom !important; grid-column: 1 / span 1; @@ -344,7 +344,7 @@ width: 100% !important; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-banner-b-image) { grid-column: 1 / span 1; } @@ -357,7 +357,7 @@ width: 100% !important; } -@media (max-width: 959px) { +@media screen(-lg) { :global(.venia-home-banner-b-content) { grid-column: 1 / span 1; margin: 0 1rem !important; @@ -425,7 +425,7 @@ justify-content: normal !important; } -@media (max-width: 960px) { +@media screen(-lg) { :global(.venia-home-banner-text > div) { flex-direction: column !important; justify-content: center !important; diff --git a/packages/venia-ui/lib/components/Main/main.module.css b/packages/venia-ui/lib/components/Main/main.module.css index f8a0106c59..3be46755cf 100755 --- a/packages/venia-ui/lib/components/Main/main.module.css +++ b/packages/venia-ui/lib/components/Main/main.module.css @@ -20,19 +20,19 @@ composes: page; } -@media (min-height: 640px) { +@media screen(hsm) { .page { min-height: 48rem; } } -@media (min-height: 768px) { +@media screen(hmd) { .page { min-height: 60rem; } } -@media (min-height: 960px) { +@media screen(hlg) { .page { min-height: 72rem; } diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.module.css index 27e74a8458..9b5450241d 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.module.css @@ -8,7 +8,7 @@ composes: lg_gap-y-1.5 from global; } -@media (min-width: 960px) { +@media screen(lg) { .root { grid-template-columns: auto repeat(3, 1fr) auto; grid-template-rows: repeat(5, auto); diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css index 2a5a733cd1..d3c91f21ee 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css @@ -64,7 +64,7 @@ * Mobile-specific styles. */ -@media (max-width: 959px) { +@media screen(-lg) { .shippingInformationContainer { grid-row: 1 / span 1; grid-column: 1 / span 1; diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css index d86222d527..b962be113d 100644 --- a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css +++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css @@ -7,7 +7,7 @@ composes: rounded-box from global; } -@media (min-width: 960px) { +@media screen(lg) { .root { grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr) diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css index 1842a80c61..b6273703aa 100644 --- a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css +++ b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css @@ -9,7 +9,7 @@ composes: lg_py-md from global; } -@media (min-width: 960px) { +@media screen(lg) { .root { grid-template-areas: 'images title' @@ -154,7 +154,7 @@ list-style: none; } -@media (min-width: 1024px) { +@media screen(xl) { .details { align-self: stretch; border-top-width: 1px; diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css index 83225ab85a..d2baf7379a 100644 --- a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css +++ b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.module.css @@ -8,7 +8,7 @@ 'thumbs'; } -@media (min-width: 960px) { +@media screen(lg) { .root { grid-template-areas: 'thumbs main'; /* These values are mirrored in JS for image sizes. Keep them in sync. */ diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css b/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css index d369c57345..3c3dd56eb5 100644 --- a/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css +++ b/packages/venia-ui/lib/components/ProductImageCarousel/thumbnail.module.css @@ -35,7 +35,7 @@ } /* For desktop mode where buttons are an image... */ -@media (min-width: 960px) { +@media screen(lg) { .rootSelected { composes: root; diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css index b8bbadef30..3332943dfe 100644 --- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css +++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.module.css @@ -99,7 +99,7 @@ composes: xs_lg_block from global; } -@media (max-width: 479px) { +@media screen(-xs) { .deleteConfirmationContainer { transform: scaleY(1); } diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css index 36a1053139..9500c5b078 100644 --- a/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css +++ b/packages/venia-ui/lib/components/WishlistPage/wishlist.module.css @@ -20,7 +20,7 @@ composes: md_gap-y-2xs from global; } -@media (max-width: 799px) { +@media screen(-md) { .header { grid-template-rows: 1fr 1fr; } diff --git a/packages/venia-ui/lib/tokens.module.css b/packages/venia-ui/lib/tokens.module.css index 09a0a37c91..658950da74 100644 --- a/packages/venia-ui/lib/tokens.module.css +++ b/packages/venia-ui/lib/tokens.module.css @@ -88,7 +88,7 @@ --venia-global-header-minHeight: theme(spacing.header); } -@media (max-width: 959px) { +@media screen(-lg) { :global(:root) { --venia-global-header-minHeight: 3.5rem; } From c97665733184839328cd1510aab695d7b857de86 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 12:13:38 -0400 Subject: [PATCH 07/13] Fixing lint and prettier --- packages/pwa-theme-venia/lib/colors.js | 11 ++++++----- packages/pwa-theme-venia/tailwind.preset.js | 8 ++++---- .../lib/components/AccountMenu/accountMenu.js | 4 +++- .../lib/components/AccountMenu/accountMenu.module.css | 2 +- .../lib/components/Checkbox/checkbox.module.css | 2 +- .../components/CheckoutPage/checkoutPage.module.css | 1 - .../lib/components/Field/fieldIcons.module.css | 8 ++++++-- .../lib/components/Newsletter/newsletter.module.css | 9 +++++++-- .../QuantityStepper/quantityStepper.module.css | 2 +- .../lib/components/RichContent/richContent.module.css | 2 +- 10 files changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/pwa-theme-venia/lib/colors.js b/packages/pwa-theme-venia/lib/colors.js index aa1b18d94b..44ef9596ab 100644 --- a/packages/pwa-theme-venia/lib/colors.js +++ b/packages/pwa-theme-venia/lib/colors.js @@ -79,19 +79,20 @@ const getPropertyValueFunction = property => { }; }; -const hexToRgb = (color) => { +const hexToRgb = color => { if (color.indexOf('#') !== 0) { return color; } - return color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) - .map((value) => { + return color + .match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) + .map(value => { return parseInt(value, 16); }) - .filter((value) => { + .filter(value => { return !isNaN(value); }) .join(' '); -} +}; module.exports = { declareColors, getColors, hexToRgb }; diff --git a/packages/pwa-theme-venia/tailwind.preset.js b/packages/pwa-theme-venia/tailwind.preset.js index 04a730ac74..65c3c3d70d 100644 --- a/packages/pwa-theme-venia/tailwind.preset.js +++ b/packages/pwa-theme-venia/tailwind.preset.js @@ -98,7 +98,7 @@ const extend = { }), colors: getColors(colors), content: { - 'empty': '' + empty: '' }, flex: { textInput: '0 0 100%' @@ -107,7 +107,7 @@ const extend = { sans: ['Muli', 'sans-serif'], serif: ['Source Serif Pro', 'serif'] }, - fontSize: theme => ({ + fontSize: { '2xs': ['0.6875rem', '1.5'], // 11px xs: ['0.75rem', '1.5'], // 12px sm: ['0.875rem', '1.5'], // 14px @@ -119,7 +119,7 @@ const extend = { '4xl': ['3.75rem', '1.5'], // 60px '5xl': ['6rem', '1'], // 96px inherit: 'inherit' - }), + }, fontWeight: { DEFAULT: '300' }, @@ -334,7 +334,7 @@ const theme = { orange: hexToRgb(theme('colors.amber.500')), red: { 400: hexToRgb(theme('colors.red.400')), - 700: hexToRgb(theme('colors.red.700')), + 700: hexToRgb(theme('colors.red.700')) } } } diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js index 6ee915609f..5148e8b020 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js @@ -27,7 +27,9 @@ const AccountMenu = React.forwardRef((props, ref) => { } = talonProps; const classes = useStyle(defaultClasses, props.classes); - const rootClass = accountMenuIsOpen ? classes.root_open : classes.root_closed; + const rootClass = accountMenuIsOpen + ? classes.root_open + : classes.root_closed; const contentsClass = accountMenuIsOpen ? classes.contents_open : classes.contents; diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css index 38c61e9053..ebb25a16ab 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css @@ -7,7 +7,7 @@ composes: top-full from global; composes: z-menu from global; composes: -translate-x-1/2 from global; - + transition: opacity 192ms var(--venia-global-anim-out), visibility 192ms var(--venia-global-anim-out), /* Adding delay to move container off the screen after previous transitions happened */ diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.module.css b/packages/venia-ui/lib/components/Checkbox/checkbox.module.css index 4c0a926896..0a8544575c 100644 --- a/packages/venia-ui/lib/components/Checkbox/checkbox.module.css +++ b/packages/venia-ui/lib/components/Checkbox/checkbox.module.css @@ -29,7 +29,7 @@ composes: active_enabled_shadow-radioActive from global; composes: active_enabled_outline-0 from global; - + composes: focus_enabled_shadow-radioFocus from global; composes: focus_enabled_outline-0 from global; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css index b3ad920654..1f255690d7 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css @@ -8,7 +8,6 @@ composes: lg_px-lg from global; } - .checkoutContent { composes: gap-xs from global; composes: grid from global; diff --git a/packages/venia-ui/lib/components/Field/fieldIcons.module.css b/packages/venia-ui/lib/components/Field/fieldIcons.module.css index ffe7d6cbcb..938271b104 100644 --- a/packages/venia-ui/lib/components/Field/fieldIcons.module.css +++ b/packages/venia-ui/lib/components/Field/fieldIcons.module.css @@ -15,8 +15,12 @@ } .input > input { - padding-left: calc(theme(spacing[7.5]) * var(--iconsBefore) + theme(spacing[2.5])); - padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])); + padding-left: calc( + theme(spacing[7.5]) * var(--iconsBefore) + theme(spacing[2.5]) + ); + padding-right: calc( + theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) + ); } .before, diff --git a/packages/venia-ui/lib/components/Newsletter/newsletter.module.css b/packages/venia-ui/lib/components/Newsletter/newsletter.module.css index c6cdc8dbb0..a5f91ba963 100644 --- a/packages/venia-ui/lib/components/Newsletter/newsletter.module.css +++ b/packages/venia-ui/lib/components/Newsletter/newsletter.module.css @@ -17,12 +17,17 @@ } .form input { - padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) + theme(spacing[20])); + padding-right: calc( + theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) + + theme(spacing[20]) + ); } @media screen(-md) { .form input { - padding-right: calc(theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])); + padding-right: calc( + theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) + ); } } diff --git a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css index e065e91f83..e38d1693f5 100644 --- a/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css +++ b/packages/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css @@ -43,7 +43,7 @@ .button:disabled, .button:disabled:hover { --stroke: rgb(var(--venia-global-color-gray-400)); - @apply border-base + @apply border-base; } .button_decrement { diff --git a/packages/venia-ui/lib/components/RichContent/richContent.module.css b/packages/venia-ui/lib/components/RichContent/richContent.module.css index e180f50da6..07ab9c70ee 100644 --- a/packages/venia-ui/lib/components/RichContent/richContent.module.css +++ b/packages/venia-ui/lib/components/RichContent/richContent.module.css @@ -76,7 +76,7 @@ } .root ul { - @apply list-disc + @apply list-disc; } .root a { From 7e7363b03e3fa57e567dd36b3e4bbab23d0ef336 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 12:47:59 -0400 Subject: [PATCH 08/13] Fixing tailwind review comments, updating tailwind doc --- packages/pwa-theme-venia/tw-issues.txt | 2 ++ packages/pwa-theme-venia/tw-progress.txt | 2 +- .../lib/components/AccountMenu/accountMenu.module.css | 8 ++------ .../components/CartPage/GiftCards/giftCards.module.css | 2 +- .../orderConfirmationPage.module.css | 1 - .../CheckoutPage/ShippingInformation/editModal.module.css | 8 ++------ .../lib/components/Header/currencySwitcher.module.css | 4 +--- .../venia-ui/lib/components/MiniCart/miniCart.module.css | 8 ++------ .../lib/components/SearchBar/searchBar.module.css | 6 ++---- 9 files changed, 13 insertions(+), 28 deletions(-) diff --git a/packages/pwa-theme-venia/tw-issues.txt b/packages/pwa-theme-venia/tw-issues.txt index f212f0eac0..52cb7e09b5 100644 --- a/packages/pwa-theme-venia/tw-issues.txt +++ b/packages/pwa-theme-venia/tw-issues.txt @@ -133,6 +133,8 @@ GOOD PATTERN (only variants in JSX, not "root"): .root_closed { composes: root; } .root_open { composes: root; } +Possible alternative fix is to use Tailwind's @apply directive though composition is prefered + // ---------------------------------------------- // B7. Prettier mangles TW2 arbitrary values syntax diff --git a/packages/pwa-theme-venia/tw-progress.txt b/packages/pwa-theme-venia/tw-progress.txt index 0fc48c8847..0f9496e5ca 100644 --- a/packages/pwa-theme-venia/tw-progress.txt +++ b/packages/pwa-theme-venia/tw-progress.txt @@ -33,7 +33,7 @@ These files cannot be composed into because of global() or child selector usage: // ---------------------------------------------- // Comments -🟡 TODO @TW: cannot compose --- (75) +✅ TODO @TW: cannot compose ✅ TODO @TW: responsive 🟡 TODO @TW: review --- (23) diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css index ebb25a16ab..a6ed1e384a 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css @@ -19,9 +19,7 @@ composes: root; composes: left-[-100vw] from global; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + @apply invisible; } .root_open { @@ -32,9 +30,7 @@ transition: opacity 224ms var(--venia-global-anim-in), visibility 224ms var(--venia-global-anim-in), left 0s; - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + @apply visible } .contents { diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css index ae9ee6fbf3..4890d0eb48 100644 --- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css +++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css @@ -42,7 +42,7 @@ } .invalid_card_error { - color: red; + composes: text-red-700 from global; } .card_input_container_error input { diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css index 6b1b14de28..18e2e10619 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css @@ -10,7 +10,6 @@ composes: py-sm from global; composes: lg_gap-md from global; - /* TODO @TW: review (B7) */ composes: lg_grid-cols-[2fr_1fr] from global; composes: lg_px-lg from global; composes: lg_py-md from global; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css index 59ea367b5c..a4f3301e5c 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/editModal.module.css @@ -18,9 +18,7 @@ transition-timing-function: var(--venia-global-anim-out); transition-property: opacity, transform, visibility; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + @apply invisible; composes: lg_h-auto from global; composes: lg_max-h-modal from global; @@ -50,9 +48,7 @@ transition-duration: 224ms; transition-timing-function: var(--venia-global-anim-in); - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + @apply visible; } @media screen(-lg) { diff --git a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css index 9b3a1c121d..4e311b93f5 100644 --- a/packages/venia-ui/lib/components/Header/currencySwitcher.module.css +++ b/packages/venia-ui/lib/components/Header/currencySwitcher.module.css @@ -41,9 +41,7 @@ transition-timing-function: var(--venia-global-anim-out); transition-property: opacity, transform, visibility; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + @apply invisible; composes: sm_bottom-auto from global; composes: sm_left-auto from global; diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css index 57268e8907..7532ea534d 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.module.css +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.module.css @@ -19,9 +19,7 @@ composes: left-[-100vw] from global; - /* TODO @TW: review (B6) */ - /* composes: invisible from global; */ - visibility: hidden; + @apply invisible; } .root_open { @@ -32,9 +30,7 @@ transition: opacity 224ms var(--venia-global-anim-in), visibility 224ms var(--venia-global-anim-in), left 0s; - /* TODO @TW: review (B6) */ - /* composes: visible from global; */ - visibility: visible; + @apply visible; } /* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */ diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css index a422f0498e..9605061d80 100644 --- a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css +++ b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css @@ -6,10 +6,8 @@ composes: px-xs from global; composes: py-0 from global; composes: w-full from global; - - /* TODO @TW: review (B6) */ - /* composes: hidden from global; */ - display: none; + + @apply hidden; } .root_open { From 832c75e569a3ee64f8cb3727065d17fe4fe3075c Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 12:54:59 -0400 Subject: [PATCH 09/13] fix prettier --- .../venia-ui/lib/components/AccountMenu/accountMenu.module.css | 2 +- packages/venia-ui/lib/components/SearchBar/searchBar.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css index a6ed1e384a..b3c11e10c7 100644 --- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css +++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.module.css @@ -30,7 +30,7 @@ transition: opacity 224ms var(--venia-global-anim-in), visibility 224ms var(--venia-global-anim-in), left 0s; - @apply visible + @apply visible; } .contents { diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css index 9605061d80..017daf3bc9 100644 --- a/packages/venia-ui/lib/components/SearchBar/searchBar.module.css +++ b/packages/venia-ui/lib/components/SearchBar/searchBar.module.css @@ -6,7 +6,7 @@ composes: px-xs from global; composes: py-0 from global; composes: w-full from global; - + @apply hidden; } From 985e94a0e6e3f5d6d4addf088649f6504166a00f Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 14:38:44 -0400 Subject: [PATCH 10/13] Removing checkmo from tests --- packages/venia-concept/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json index 9d638df89c..5d04623b5c 100644 --- a/packages/venia-concept/package.json +++ b/packages/venia-concept/package.json @@ -35,8 +35,7 @@ }, "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme", "dependencies": { - "@magento/pwa-buildpack": "~11.4.1", - "@magento/venia-sample-payments-checkmo": "0.0.10" + "@magento/pwa-buildpack": "~11.4.1" }, "devDependencies": { "@adobe/apollo-link-mutation-queue": "~1.0.2", From 5dac7c0e507aa0a3d0e5d5cf0c9842d724fedaf3 Mon Sep 17 00:00:00 2001 From: Justin Conabree Date: Thu, 8 Jun 2023 15:42:11 -0400 Subject: [PATCH 11/13] fix jest test for accout menu --- .../__tests__/__snapshots__/accountMenu.spec.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-ui/lib/components/AccountMenu/__tests__/__snapshots__/accountMenu.spec.js.snap b/packages/venia-ui/lib/components/AccountMenu/__tests__/__snapshots__/accountMenu.spec.js.snap index 3822ba20ef..0030aa9b35 100644 --- a/packages/venia-ui/lib/components/AccountMenu/__tests__/__snapshots__/accountMenu.spec.js.snap +++ b/packages/venia-ui/lib/components/AccountMenu/__tests__/__snapshots__/accountMenu.spec.js.snap @@ -61,7 +61,7 @@ exports[`it renders create account component when the view is CREATE_ACCOUNT 1`] exports[`it renders empty aside element when accountMenuIsOpen is false 1`] = `