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

package/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Submenu renders correctly it renders correctly 1`] = `
 <div
-  className="submenu"
+  className="submenu_inactive"
 >
   <div
     className="submenuItems"

package/lib/components/MegaMenu/megaMenuItem.module.css

@@ -1,28 +1,30 @@
 .megaMenuItem {
-    padding: 0 10px;
+    composes: px-3 from global;
+    composes: py-0 from global;
 }
 
 .megaMenuLink {
-    align-items: center;
-    display: inline-flex;
+    composes: items-center from global;
+    composes: inline-flex from global;
     min-height: 5rem;
 }
 
 .megaMenuLinkActive {
     composes: megaMenuLink;
-    text-decoration: underline;
+    composes: underline from global;
 }
 
 .megaMenuItem_active {
     composes: megaMenuItem;
-    display: flex;
+    composes: flex from global;
 }
 
 .arrowDown {
-    padding-left: 0.5rem;
-    line-height: 0;
+    composes: leading-[0] from global;
+    composes: pl-2xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .megaMenuItem:hover .megaMenuLink,
 .megaMenuItem:focus .megaMenuLink {
     text-decoration: underline;

package/lib/components/MegaMenu/submenu.js

@@ -37,7 +37,7 @@ const Submenu = props => {
 
     const subMenuClassname = isSubMenuActive
         ? classes.submenu_active
-        : classes.submenu;
+        : classes.submenu_inactive;
 
     const subMenus = items.map((category, index) => {
         const keyboardProps =

package/lib/components/MegaMenu/submenu.module.css

@@ -1,16 +1,17 @@
 .submenu {
-    background-color: rgb(var(--venia-global-color-gray-50));
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
+    composes: left-0 from global;
+    composes: px-3 from global;
+    composes: py-5 from global;
+    composes: right-0 from global;
+    composes: top-full from global;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
-    display: none;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    left: 0;
-    position: absolute;
-    padding: 20px 10px;
-    right: 0;
-    top: 100%;
 }
 
+/* TODO @TW: cannot compose */
 .submenu::before {
     box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
     content: '';
@@ -22,16 +23,21 @@
     top: 0;
 }
 
+.submenu_inactive {
+    composes: submenu;
+    composes: hidden from global;
+}
+
 .submenu_active {
     composes: submenu;
-    display: flex;
+    composes: flex from global;
 }
 
 .submenuItems {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--venia-global-maxWidth);
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
+    composes: max-w-site from global;
+    composes: ml-auto from global;
+    composes: mr-auto from global;
 }

package/lib/components/MegaMenu/submenuColumn.module.css

@@ -1,26 +1,28 @@
 .submenuColumn {
-    max-width: 235px;
-    padding: 20px;
+    composes: max-w-[235px] from global;
+    composes: p-5 from global;
 }
 
 .heading {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .link {
-    white-space: nowrap;
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
 }
 
-.link:hover,
-.link:focus,
 .linkActive {
-    text-decoration: underline;
+    composes: underline from global;
 }
 
 .submenuChild {
-    margin-top: 21px;
+    composes: mt-5 from global;
 }
 
 .submenuChildItem {
-    margin-bottom: 12px;
+    composes: mb-3 from global;
 }

package/lib/components/MiniCart/ProductList/item.module.css

@@ -1,11 +1,11 @@
 .root {
-    display: grid;
+    composes: gap-x-xs from global;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: opacity-100 from global;
+    composes: text-sm from global;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto auto auto 1fr;
-    column-gap: 1rem;
-    row-gap: 0.5rem;
-    font-size: var(--venia-global-fontSize-100);
-    opacity: 1;
     transition-delay: 64ms;
     transition-duration: 384ms;
     transition-property: opacity;
@@ -14,7 +14,8 @@
 
 .root_disabled {
     composes: root;
-    opacity: 0.5;
+
+    composes: opacity-50 from global;
 }
 
 .thumbnailContainer {
@@ -23,19 +24,21 @@
 }
 
 .thumbnail {
-    border: solid 1px rgb(var(--venia-global-color-border));
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
 }
 
 .name {
-    font-weight: 600;
+    composes: font-semibold from global;
+    composes: mb-2xs from global;
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
-    margin-bottom: 0.5rem;
 }
 
 .options {
-    display: grid;
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
     grid-column: 2 / span 1;
     grid-row: 2 / span 2;
 }
@@ -51,8 +54,8 @@
 }
 
 .stockStatus {
-    color: rgb(var(--venia-global-color-error));
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
+    composes: text-error from global;
     grid-column: 2;
     grid-row: 6;
 }

package/lib/components/MiniCart/ProductList/productList.module.css

@@ -1,4 +1,4 @@
 .root {
-    display: grid;
-    gap: 1.5rem;
+    composes: gap-sm from global;
+    composes: grid from global;
 }

package/lib/components/MiniCart/miniCart.module.css

@@ -1,52 +1,54 @@
 .root {
-    --content-width: 22.5rem;
-
-    height: 0;
-    overflow: visible;
-    left: -100vw;
-    opacity: 0;
-    position: absolute;
-    top: 100%;
+    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;
     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;
-    visibility: hidden;
-    width: calc(100vw - 2rem);
-    /* max-width wider than header to let dropdown to move left on wider screens while still staying near the trigger */
-    max-width: calc(
-        var(--venia-global-maxWidth) + var(--content-width) * 2 - 8rem
-    );
-    z-index: 3;
+    width: calc(100vw - 2rem); /* TODO @TW: review */
     transform: translate3d(-50%, 0, 0);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
 }
 
 .root_open {
     composes: root;
-    left: 50%;
-    opacity: 1;
+
+    composes: left-1/2 from global;
+    composes: opacity-100 from global;
     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;
 }
 
+/* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */
 .contents {
-    background-color: rgb(var(--venia-global-color-background));
-    border-radius: 1px;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: grid from global;
+    composes: max-h-[35rem] from global;
+    composes: overflow-hidden from global;
+    composes: right-0 from global;
+    composes: rounded-sm from global;
+    composes: top-0 from global;
+    composes: w-[22.5rem] from global;
     box-shadow: 0 1px 6px rgb(var(--venia-global-color-gray-900) / 0.2);
-    display: grid;
-    /* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */
     min-height: 20rem;
-    max-height: 35rem;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
     transform: translate3d(0, -8px, 0);
     transition-duration: 192ms;
     transition-property: transform;
     transition-timing-function: var(--venia-global-anim-out);
-    width: var(--content-width);
 }
 
 .contents_open {
@@ -58,35 +60,41 @@
 }
 
 .header {
-    align-items: center;
-    border-bottom: 2px solid rgb(var(--venia-global-color-gray-100));
-    display: grid;
-    font-size: var(--venia-global-typography-heading-XS-fontSize);
-    font-weight: 600;
-    grid-template-columns: 1fr auto;
-    line-height: var(--venia-global-typography-heading-lineHeight);
-    margin: 0 1rem;
-    padding: 1rem 0.5rem 0.5rem;
-    row-gap: 1rem;
+    composes: border-b-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: font-semibold from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: items-center from global;
+    composes: leading-tight from global;
+    composes: mx-xs from global;
+    composes: my-0 from global;
+    composes: pb-2xs from global;
+    composes: pt-xs from global;
+    composes: px-2xs from global;
+    composes: text-sm from global;
 }
 
 .stockStatusMessageContainer {
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
 }
 
+/* TODO @TW: cannot compose */
 .stockStatusMessageContainer:empty {
     display: none;
 }
 
 .body {
-    max-height: 25rem;
+    composes: max-h-[25rem] from global;
+    composes: overflow-y-auto from global;
+    composes: p-sm from global;
     min-height: 10rem;
-    overflow-y: scroll;
-    padding: 1.5rem;
 }
 
 .quantity {
-    opacity: 1;
+    composes: opacity-100 from global;
     transition-delay: 64ms;
     transition-duration: 384ms;
     transition-property: opacity;
@@ -95,11 +103,12 @@
 
 .quantity_loading {
     composes: quantity;
-    opacity: 0.5;
+
+    composes: opacity-50 from global;
 }
 
 .price {
-    opacity: 1;
+    composes: opacity-100 from global;
     transition-delay: 64ms;
     transition-duration: 384ms;
     transition-property: opacity;
@@ -108,45 +117,50 @@
 
 .price_loading {
     composes: quantity;
-    opacity: 0.5;
+
+    composes: opacity-50 from global;
 }
 
 .footer {
-    align-items: center;
-    border-top: 2px solid rgb(var(--venia-global-color-gray));
-    display: grid;
-    gap: 0.5rem;
-    font-size: var(--venia-typography-body-S-fontSize);
-    justify-items: center;
-    line-height: var(--venia-typography-body-lineHeight);
-    margin: 0 1rem;
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: mx-xs from global;
+    composes: my-0 from global;
+    composes: overflow-hidden from global;
+    composes: p-xs from global;
+    composes: text-sm from global;
     min-height: 3rem;
-    overflow: hidden;
-    padding: 1rem;
 }
 
 .checkoutButton {
     composes: root_highPriority from '../Button/button.module.css';
+
+    composes: bg-brand-dark from global;
+    composes: border-0 from global;
+    composes: font-bold from global;
+    composes: m-auto from global;
+    composes: w-[10rem] from global;
     grid-column: 1 / span 1;
-    width: 10rem;
-    margin: auto;
-    background-color: rgb(var(--venia-brand-color-1-700));
-    border: none;
-    font-weight: bold;
 }
 
 .editCartButton {
-    text-decoration: underline;
-    font-size: var(--venia-global-fontSize-100);
+    composes: text-sm from global;
+    composes: underline from global;
 }
 
 .emptyCart {
-    display: grid;
-    gap: 2rem;
-    padding: 2rem;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: p-md from global;
 }
 
 .emptyMessage {
-    margin: auto;
-    font-weight: bold;
+    composes: font-bold from global;
+    composes: m-auto from global;
 }

package/lib/components/MyAccount/ResetPassword/resetPassword.module.css

@@ -1,54 +1,53 @@
 .root {
-    display: grid;
-    justify-content: center;
-    padding: 2.5rem 0;
-    text-align: center;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-[2.5rem] from global;
+    composes: text-center from global;
     grid-template-columns: minmax(auto, 512px);
-    row-gap: 2rem;
 }
 
 .header {
-    font-family: var(--venia-global-fontFamily-serif);
+    composes: font-serif from global;
 }
 
 .form {
-    display: grid;
-    gap: 0.9375rem;
-    justify-items: stretch;
-    padding: 1rem 1.5rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
+    composes: lg_mb-md from global;
 }
 
 .description {
-    font-weight: 300;
-    line-height: 1.25rem;
+    composes: font-light from global;
+    composes: leading-5 from global;
 }
 
 .buttonContainer {
-    margin-top: 1rem;
+    composes: mt-xs from global;
 }
 
 .submitButton {
     composes: root_highPriority from '../../Button/button.module.css';
-    justify-self: center;
+    composes: justify-self-center from global;
 }
 
 .invalidToken,
 .successMessage {
-    padding: 1.5rem;
-    text-align: center;
+    composes: p-sm from global;
+    composes: text-center from global;
 }
 
 .invalidToken {
-    color: rgb(var(--venia-global-color-error));
+    composes: text-error from global;
 }
 
-@media (min-width: 961px) {
-    .contentContainer {
-        border: 2px solid rgb(var(--venia-global-color-border));
-        border-radius: 0.375rem;
-    }
-
-    .form {
-        margin-bottom: 2rem;
-    }
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_rounded-md from global;
 }

package/lib/components/MyAccount/accountLink.module.css

@@ -1,29 +1,31 @@
 .root {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    width: 100%;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: w-full from global;
 }
 
 .content {
-    align-items: center;
-    display: grid;
-    gap: 0.5rem;
-    grid-auto-flow: column;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: h-[3rem] from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
     grid-template-columns: 2rem 1fr;
-    height: 3rem;
-    justify-items: start;
 }
 
 .icon {
-    align-items: center;
-    color: rgb(var(--venia-global-color-teal));
-    display: flex;
-    justify-content: center;
-    justify-self: center;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-self-center from global;
+    composes: text-brand from global;
 }
 
 .text {
-    font-size: 0.875rem;
-    line-height: 1rem;
+    composes: leading-none from global;
+    composes: text-sm from global;
 }
 
 .root_normalPriority {

package/lib/components/MyAccount/myAccount.module.css

@@ -1,5 +1,5 @@
 .root {
-    display: grid;
-    grid-auto-flow: row;
-    row-gap: 1.5rem;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
 }

package/lib/components/Navigation/navHeader.module.css

@@ -1,8 +1,9 @@
 .title {
-    align-items: center;
-    display: inline-flex;
-    font-size: 1rem;
-    font-weight: 400;
-    padding: 0 0.5rem;
-    text-transform: capitalize;
+    composes: capitalize from global;
+    composes: font-normal from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: text-colorDefault from global;
 }