@magento/venia-ui 9.3.0-beta.1 → 9.4.0-beta.1

package/lib/components/WishlistPage/wishlistItems.module.css

@@ -1,11 +1,9 @@
 .root {
-    display: grid;
-    grid-gap: 2rem;
     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-}
+    composes: gap-x-xs from global;
+    composes: gap-y-md from global;
+    composes: grid from global;
 
-@media (max-width: 480px) {
-    .root {
-        column-gap: 1rem;
-    }
+    composes: xs_gap-x-md from global;
+    composes: xs_gap-y-md from global;
 }

package/lib/components/WishlistPage/wishlistMoreActionsDialog.module.css

@@ -1,17 +1,19 @@
 .root {
-    display: grid;
+    composes: grid from global;
 }
 
 .row {
-    align-items: center;
-    display: grid;
-    gap: 2rem;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: p-xs from global;
+    composes: text-left from global;
     grid-template-columns: auto 1fr auto;
-    padding: 1rem;
-    text-align: left;
 }
 
-.rowButton:nth-child(even) {
-    border-top: 2px solid rgb(var(--venia-global-color-gray));
-    border-bottom: 2px solid rgb(var(--venia-global-color-gray));
+.rowButton {
+    composes: even_border-bottom-2 from global;
+    composes: even_border-light from global;
+    composes: even_border-solid from global;
+    composes: even_border-top-2 from global;
 }

package/lib/components/WishlistPage/wishlistPage.module.css

@@ -1,35 +1,35 @@
 .root {
-    display: grid;
-    padding: 2rem 3rem;
-    row-gap: 2rem;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: pl-sm from global;
+    composes: pr-sm from global;
+    composes: py-md from global;
+
+    composes: lg_gap-y-md from global;
+    composes: lg_px-lg from global;
 }
 
 .heading {
-    justify-self: center;
-    font-family: var(--venia-global-fontFamily-serif);
-    font-weight: var(--venia-global-fontWeight-bold);
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+    composes: pb-xs from global;
+
+    composes: lg_pb-0 from global;
 }
 
 .errorContainer {
-    justify-self: center;
+    composes: justify-self-center from global;
 }
 
 .fetchError {
-    border-left: 4px solid rgb(var(--venia-global-color-error));
-    color: rgb(var(--venia-global-color-error));
-    font-size: var(--venia-typography-body-S-fontSize);
-    font-weight: var(--venia-global-fontWeight-semibold);
-    padding: 0.625rem 0 0.625rem 1rem;
-}
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-        row-gap: 1rem;
-    }
-
-    .heading {
-        padding-bottom: 1rem;
-    }
+    composes: border-l-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
+    composes: font-semibold from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-2.5 from global;
+    composes: text-error from global;
+    composes: text-sm from global;
 }

package/lib/components/clickable.module.css

@@ -1,9 +1,9 @@
 .root {
-    align-items: center;
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    line-height: 1;
-    pointer-events: auto;
-    text-align: center;
+    composes: cursor-pointer from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: leading-none from global;
+    composes: pointer-events-auto from global;
+    composes: text-center from global;
 }

package/lib/index.module.css

@@ -1,14 +1,19 @@
 @import './tokens.module.css';
 
 :global(*) {
+    /* composes: box-border from global; */
     box-sizing: border-box;
 }
 
+/* TODO @TW: cannot compose */
 :global(html) {
-    background-color: rgb(var(--venia-global-color-gray-50));
+    /* composes: text-[100%] from global; */
     font-size: 100%;
-    font-weight: var(--venia-global-fontWeight-normal);
-    line-height: var(--venia-global-lineHeight-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;
 }
@@ -19,22 +24,25 @@
  * https://bugs.webkit.org/show_bug.cgi?id=153852
  *
  * :global(html[data-scroll-lock='true'] body) {
- *   overflow: hidden ;
+ *   overflow: hidden;
  * }
  */
 
+/* TODO @TW: cannot compose */
 :global(body),
 :global(button),
 :global(input),
 :global(select),
 :global(textarea) {
-    color: rgb(var(--venia-global-color-text));
-    font-family: var(--venia-global-fontFamily-sansSerif);
+    /* composes: text-gray-900 from global; */
+    /* color: rgb(var(--venia-global-color-text)); */
+    color: rgb(23 32 38);
 }
 
 :global(body) {
-    background-color: rgb(var(--venia-global-color-gray-50));
+    /* composes: m-0 from global; */
     margin: 0;
+    /* composes: p-0 from global; */
     padding: 0;
 }
 
@@ -44,53 +52,74 @@
 :global(h4),
 :global(h5),
 :global(h6) {
-    font-size: var(--venia-global-fontSize-200);
-    font-weight: var(--venia-global-fontWeight-normal);
+    /* composes: font-base from global; */
+    font-size: 1rem;
+    /* composes: font-normal from global; */
+    font-weight: 400;
+    /* composes: m-0 from global; */
     margin: 0;
 }
 
 :global(h1) {
-    font-size: var(--venia-global-fontSize-600);
+    /* composes: text-xl from global; */
+    font-size: 1.5rem;
 }
 
 :global(h2) {
-    font-size: var(--venia-global-fontSize-400);
+    /* composes: text-lg from global; */
+    font-size: 1.25rem;
 }
 
 :global(a) {
+    /* composes: text-current from global; */
     color: currentColor;
+    /* composes: no-underline from global; */
     text-decoration: none;
 }
 
 :global(p) {
+    /* composes: m-0 from global; */
     margin: 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;
 }
 
 :global(dd),
 :global(dt) {
+    /* composes: m-0 from global; */
     margin: 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;
 }
 
 :global(button:disabled) {
+    /* composes: cursor-default from global; */
     cursor: default;
     touch-action: none;
 }

package/lib/targets/__tests__/venia-ui-targets.spec.js

@@ -7,6 +7,7 @@ const {
 const { createTestInstance } = require('@magento/peregrine');
 const declare = require('../venia-ui-declare');
 const intercept = require('../venia-ui-intercept');
+const { DefinePlugin } = require('webpack');
 
 const thisDep = {
     name: '@magento/venia-ui',
@@ -14,7 +15,7 @@ const thisDep = {
     intercept
 };
 
-const WEBPACK_BUILD_TIMEOUT = 20000;
+const WEBPACK_BUILD_TIMEOUT = 30000;
 
 const mockComponent = name => `function ${name}(props) { return <div className={name}>{props.children}</div>;
 `;
@@ -59,7 +60,31 @@ test('uses RichContentRenderers to inject a default strategy into RichContent',
 
     const built = await buildModuleWith('../../components/RichContent', {
         context: __dirname,
-        dependencies: ['@magento/peregrine', thisDep]
+        dependencies: ['@magento/peregrine', thisDep],
+        plugins: [
+            new DefinePlugin({
+                STORE_VIEW_CODE: '"default"',
+                AVAILABLE_STORE_VIEWS: `[
+                {
+                    base_currency_code: 'USD',
+                    code: 'default',
+                    default_display_currency_code: 'USD',
+                    id: 1,
+                    locale: 'en_US',
+                    store_name: 'Default Store View"'
+                },
+                {
+                    base_currency_code: 'EUR',
+                    code: 'french',
+                    default_display_currency_code: 'EUR',
+                    id: 2,
+                    locale: 'fr_FR',
+                    secure_base_media_url: 'https://example.com/media/abcdef/',
+                    store_name: 'French'
+                }
+            ]`
+            })
+        ]
     });
 
     const RichContent = built.run();

package/lib/tokens.module.css

@@ -9,86 +9,86 @@
     /* color */
     --venia-global-color-blue-100: 194 200 255;
     --venia-global-color-blue-400: 61 132 255;
-    --venia-global-color-blue-500: 51 109 255;
-    --venia-global-color-blue-600: 41 84 255;
+    /* --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-800: 23 43 196;
+    /* --venia-global-color-blue-800: 23 43 196; */
     --venia-global-color-gray-50: 255 255 255;
-    --venia-global-color-gray-75: 250 250 250;
+    /* --venia-global-color-gray-75: 250 250 250; */
     --venia-global-color-gray-100: 244 245 245;
-    --venia-global-color-gray-200: 234 235 235;
+    /* --venia-global-color-gray-200: 234 235 235; */
     --venia-global-color-gray-300: 223 225 226;
     --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-800: 51 63 71;
+    /* --venia-global-color-gray-800: 51 63 71; */
     --venia-global-color-gray-900: 23 32 38;
     --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-400: 51 171 132; */
     --venia-global-color-green-500: 45 157 120;
-    --venia-global-color-green-600: 38 142 108;
-    --venia-global-color-green-700: 18 128 92;
+    /* --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-red-500: 227 72 80;
-    --venia-global-color-red-600: 215 55 63;
+    /* --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-800: 161 30 36;
+    /* --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);
+    /* --venia-global-color-teal-dark: var(--venia-global-color-blue-600); */
     --venia-global-color-teal-light: var(--venia-global-color-gray-100);
 
     /* color by semantics */
-    --venia-global-color-background: var(--venia-global-color-gray-50);
+    /* --venia-global-color-background: var(--venia-global-color-gray-50); */
     --venia-global-color-border: var(--venia-global-color-gray-300);
     --venia-global-color-error: var(--venia-global-color-red-700);
     --venia-global-color-text: var(--venia-global-color-gray-900);
-    --venia-global-color-text-alt: var(--venia-global-color-gray-darker);
+    /* --venia-global-color-text-alt: var(--venia-global-color-gray-darker); */
     --venia-global-color-text-hint: var(--venia-global-color-gray-500);
-    --venia-global-color-warning-dark: var(--venia-global-color-red-700);
-    --venia-global-color-warning-light: var(--venia-global-color-gray-100);
+    /* --venia-global-color-warning-dark: var(--venia-global-color-red-700); */
+    /* --venia-global-color-warning-light: var(--venia-global-color-gray-100); */
 
     /* font family */
-    --venia-global-fontFamily-sansSerif: 'Muli', sans-serif;
-    --venia-global-fontFamily-serif: 'Source Serif Pro', serif;
+    /* --venia-global-fontFamily-sansSerif: 'Muli', sans-serif; */
+    /* --venia-global-fontFamily-serif: 'Source Serif Pro', serif; */
 
     /* font size */
-    --venia-global-fontSize-50: 0.6875rem; /* 11px */
-    --venia-global-fontSize-75: 0.75rem; /* 12px */
-    --venia-global-fontSize-100: 0.875rem; /* 14px */
-    --venia-global-fontSize-200: 1rem; /* 16px */
-    --venia-global-fontSize-300: 1.125rem; /* 18px */
-    --venia-global-fontSize-400: 1.25rem; /* 20px */
-    --venia-global-fontSize-500: 1.375rem; /* 22px */
-    --venia-global-fontSize-600: 1.5rem; /* 24px */
-    --venia-global-fontSize-700: 1.75rem; /* 28px */
-    --venia-global-fontSize-800: 2rem; /* 32px */
-    --venia-global-fontSize-900: 2.25rem; /* 36px */
-    --venia-global-fontSize-1000: 2.5rem; /* 40px */
-    --venia-global-fontSize-1100: 3rem; /* 48px */
-    --venia-global-fontSize-1200: 3.5rem; /* 56px */
+    /* --venia-global-fontSize-50: 0.6875rem; */ /* 11px */
+    /* --venia-global-fontSize-75: 0.75rem; */ /* 12px */
+    /* --venia-global-fontSize-100: 0.875rem; */ /* 14px */
+    /* --venia-global-fontSize-200: 1rem; */ /* 16px */
+    /* --venia-global-fontSize-300: 1.125rem; */ /* 18px */
+    /* --venia-global-fontSize-400: 1.25rem; */ /* 20px */
+    /* --venia-global-fontSize-500: 1.375rem; */ /* 22px */
+    /* --venia-global-fontSize-600: 1.5rem; */ /* 24px */
+    /* --venia-global-fontSize-700: 1.75rem; */ /* 28px */
+    /* --venia-global-fontSize-800: 2rem; */ /* 32px */
+    /* --venia-global-fontSize-900: 2.25rem; */ /* 36px */
+    /* --venia-global-fontSize-1000: 2.5rem; */ /* 40px */
+    /* --venia-global-fontSize-1100: 3rem; */ /* 48px */
+    /* --venia-global-fontSize-1200: 3.5rem; */ /* 56px */
 
     /* font weight */
-    --venia-global-fontWeight-normal: 400;
-    --venia-global-fontWeight-semibold: 600;
-    --venia-global-fontWeight-bold: 700;
+    /* --venia-global-fontWeight-normal: 400; */
+    /* --venia-global-fontWeight-semibold: 600; */
+    /* --venia-global-fontWeight-bold: 700; */
 
     /* line height */
-    --venia-global-lineHeight-100: 1;
-    --venia-global-lineHeight-200: 1.25;
-    --venia-global-lineHeight-300: 1.5;
-    --venia-global-lineHeight-400: 1.75;
-    --venia-global-lineHeight-500: 2;
+    /* --venia-global-lineHeight-100: 1; */
+    /* --venia-global-lineHeight-200: 1.25; */
+    /* --venia-global-lineHeight-300: 1.5; */
+    /* --venia-global-lineHeight-400: 1.75; */
+    /* --venia-global-lineHeight-500: 2; */
 
     /* dimensions */
     --venia-global-maxWidth: 1440px;
     --venia-global-header-minHeight: 5rem;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(:root) {
         --venia-global-header-minHeight: 3.5rem;
     }
@@ -98,14 +98,14 @@
 :global(:root) {
     /* colors */
     --venia-brand-color-1-100: var(--venia-global-color-blue-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-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-800: var(--venia-global-color-blue-800);
+    /* --venia-brand-color-1-800: var(--venia-global-color-blue-800); */
 
-    /* typography */
-    /* heading */
+    /* typography - heading */
+    /*
     --venia-global-typography-heading-XL-fontSize: var(
         --venia-global-fontSize-600
     );
@@ -124,20 +124,24 @@
     --venia-global-typography-heading-lineHeight: calc(
         var(--venia-global-lineHeight-200) * 1em
     );
+    */
 
-    /* body */
-    --venia-typography-body-XXXL-fontSize: var(--venia-global-fontSize-600);
-    --venia-typography-body-XXL-fontSize: var(--venia-global-fontSize-500);
-    --venia-typography-body-XL-fontSize: var(--venia-global-fontSize-400);
-    --venia-typography-body-L-fontSize: var(--venia-global-fontSize-300);
-    --venia-typography-body-M-fontSize: var(--venia-global-fontSize-200);
-    --venia-typography-body-S-fontSize: var(--venia-global-fontSize-100);
-    --venia-typography-body-XS-fontSize: var(--venia-global-fontSize-50);
+    /* typography - body */
+    /* --venia-typography-body-XXXL-fontSize: var(--venia-global-fontSize-600); */
+    /* --venia-typography-body-XXL-fontSize: var(--venia-global-fontSize-500); */
+    /* --venia-typography-body-XL-fontSize: var(--venia-global-fontSize-400); */
+    /* --venia-typography-body-L-fontSize: var(--venia-global-fontSize-300); */
+    /* --venia-typography-body-M-fontSize: var(--venia-global-fontSize-200); */
+    /* --venia-typography-body-S-fontSize: var(--venia-global-fontSize-100); */
+    /* --venia-typography-body-XS-fontSize: var(--venia-global-fontSize-50); */
+    /*
     --venia-typography-body-lineHeight: calc(
         var(--venia-global-lineHeight-300) * 1em
     );
+    */
 
-    /* detail */
+    /* typography - detail */
+    /*
     --venia-typography-detail-XL-fontSize: var(--venia-global-fontSize-200);
     --venia-typography-detail-L-fontSize: var(--venia-global-fontSize-100);
     --venia-typography-detail-M-fontSize: var(--venia-global-fontSize-75);
@@ -145,4 +149,5 @@
     --venia-typography-detail-lineHeight: calc(
         var(--venia-global-lineHeight-200) * 1em
     );
+    */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.3.0-beta.1",
+  "version": "9.4.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,7 @@
     "storybook:build": "build-storybook -c .storybook -o storybook-dist"
   },
   "repository": "github:magento/pwa-studio",
-  "author": "Magento Commerce",
+  "author": "Adobe Commerce",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "bugs": {
     "url": "https://github.com/magento/pwa-studio/issues"
@@ -79,9 +79,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "~3.4.0",
-    "@magento/babel-preset-peregrine": "~1.2.0",
-    "@magento/peregrine": "12.3.0-beta.1",
-    "@magento/pwa-buildpack": "11.2.0-beta.1",
+    "@magento/babel-preset-peregrine": "1.2.1-beta.1",
+    "@magento/peregrine": "12.4.0-beta.1",
+    "@magento/pwa-buildpack": "11.3.0-beta.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
     "graphql": "~15.5.0",

package/lib/components/CartPage/ProductListing/quantity.module.css

@@ -1,76 +0,0 @@
-.root {
-    --stroke: var(--venia-global-color-gray-600);
-    text-align: center;
-    display: grid;
-    grid-template-columns: 1fr 4rem 1fr;
-    grid-column-gap: 0.5rem;
-    align-items: center;
-    justify-items: center;
-}
-
-.wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.label:not(:focus):not(:active) {
-    position: absolute;
-    overflow: hidden;
-    width: 1px;
-    height: 1px;
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    white-space: nowrap;
-}
-
-.button {
-    align-items: center;
-    background-color: rgb(var(--venia-global-color-gray-50));
-    border: 2px solid rgb(var(--venia-global-color-gray-600));
-    border-radius: 50%;
-    display: inline-flex;
-    height: 2rem;
-    justify-content: center;
-    stroke: rgb(var(--stroke));
-    width: 2rem;
-}
-
-.button:hover {
-    --stroke: rgb(var(--venia-global-color-gray-900));
-    border-color: rgb(var(--stroke));
-}
-
-.button:disabled,
-.button:disabled:hover {
-    --stroke: rgb(var(--venia-global-color-gray-400));
-    border-color: rgb(var(--venia-global-color-gray-400));
-}
-
-.button:disabled {
-    cursor: not-allowed;
-}
-
-.button:focus {
-    outline: none;
-}
-
-.button_decrement {
-    composes: button;
-}
-
-.button_increment {
-    composes: button;
-}
-
-.icon {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    touch-action: manipulation;
-}
-
-.input {
-    composes: input from '../../TextInput/textInput.module.css';
-    text-align: center;
-}