@magento/venia-ui 9.3.0 → 9.4.0

package/i18n/en_US.json

@@ -155,7 +155,6 @@
     "createWishlistForm.privateRadio": "Private",
     "createWishlistForm.publicRadio": "Public",
     "createWishlistForm.saveButton": "Save",
-    "customAttributes.title": "Details",
     "Customer Service": "Customer Service",
     "customerForm.defaultShipping": "Make this my default address",
     "customerForm.formMessage": "The shipping address you enter will be saved to your address book and set as your default for future purchases.",
@@ -357,6 +356,7 @@
     "productFullDetail.errorToken": "There was a problem with your cart. Please sign in again and try adding the item once more.",
     "productFullDetail.errorUnknown": "Could not add item to cart. Please check required options and try again.",
     "productFullDetail.productDescription": "Product Description",
+    "productFullDetail.details": "Details",
     "productFullDetail.unavailableProduct": "This product is currently unavailable for purchase.",
     "productImageCarousel.previousButtonAriaLabel": "Previous Image",
     "productImageCarousel.nextButtonAriaLabel": "Next Image",

package/lib/RootComponents/CMS/cms.module.css

@@ -10,7 +10,7 @@
 
     /* Medium */
     composes: md_mb-10 from global;
-    composes: md_text-5xl from global;
+    composes: md_text-4xl from global;
 }
 
 .root_empty,

package/lib/RootComponents/Category/NoProductsFound/noProductsFound.module.css

@@ -1,40 +1,39 @@
 .root {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    justify-content: center;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: h-screen from global;
+    composes: items-center from global;
+    composes: justify-center from global;
 }
 
 .title {
-    font-size: 1rem;
-    font-weight: 600;
-    text-align: center;
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: text-center from global;
 }
 
 .categories {
-    margin-top: 2rem;
+    composes: mt-md from global;
 }
 
 .list {
-    margin-top: 1rem;
+    composes: mt-xs from global;
 }
 
 .listItem {
-    text-align: center;
-    text-decoration: underline;
-}
+    composes: mb-2xs from global;
+    composes: text-center from global;
+    composes: underline from global;
 
-.listItem:not(:last-child) {
-    margin-bottom: 0.5rem;
+    composes: last_mb-0 from global;
 }
 
 .imageContainer {
-    margin-bottom: 2rem;
+    composes: mb-md from global;
 }
 
 .image {
-    height: 200px;
-    width: 200px;
-    max-width: 200px;
+    composes: h-[200px] from global;
+    composes: max-w-[200px] from global;
+    composes: w-[200px] from global;
 }

package/lib/RootComponents/Category/category.module.css

@@ -1,102 +1,82 @@
-:root {
-    --category-sidebar-width: 325px;
-}
-
 .root {
-    padding: 1rem;
+    composes: p-xs from global;
 }
 
 .title {
-    font-size: 1.5rem;
-    font-weight: 400;
-    padding: 0 0.5rem;
+    composes: font-normal from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: text-xl from global;
 }
 
 .pagination {
-    position: relative;
-    bottom: 0;
+    composes: relative from global;
+    composes: bottom-0 from global;
 }
 
 .placeholder {
-    height: 100vh;
+    composes: h-screen from global;
 }
 
 .categoryTitle {
-    color: rgb(var(--venia-global-color-text));
-    padding-bottom: 1rem;
-    font-size: 1.375rem;
-    font-weight: 300;
-    line-height: 1.375rem;
-    text-align: center;
+    composes: font-light from global;
+    composes: leading-snug from global;
+    composes: pb-xs from global;
+    composes: text-colorDefault from global;
+    composes: text-center from global;
+    composes: text-xl from global;
 }
 
 .heading {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding-bottom: 0.5rem;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-center from global;
+    composes: pb-2xs from global;
+
+    composes: lg_flex-nowrap from global;
+    composes: lg_items-center from global;
+    composes: lg_justify-between from global;
+    composes: lg_pb-sm from global;
+    composes: lg_w-full from global;
+}
+
+.categoryContent {
+    composes: lg_flex-grow from global;
 }
 
 .categoryInfo {
     flex-basis: 100%;
-    line-height: var(--venia-global-typography-heading-lineHeight);
-    margin: 1rem 0;
-    max-width: 75vw;
-    text-align: center;
+    composes: leading-tight from global;
+    composes: max-w-[75vw] from global;
+    composes: mx-0 from global;
+    composes: my-xs from global;
+    composes: text-center from global;
+
+    composes: lg_m-0 from global;
+    composes: lg_text-left from global;
 }
 
 .headerButtons {
-    display: flex;
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: pb-sm from global;
     flex-basis: 100%;
-    justify-content: center;
-    padding-bottom: 1.5rem;
+
+    composes: lg_justify-end from global;
+    composes: lg_pb-0 from global;
 }
 
 .contentWrapper {
-    width: 100%;
-}
+    composes: w-full from global;
 
-.sidebar {
-    display: none;
+    composes: lg_flex from global;
 }
 
-@media (min-width: 1024px) {
-    .contentWrapper {
-        display: flex;
-    }
-
-    .categoryHeader {
-        width: 100%;
-    }
-
-    .headerButtons {
-        justify-content: flex-end;
-    }
-
-    .heading {
-        justify-content: space-between;
-        flex-wrap: nowrap;
-        align-items: center;
-        padding-bottom: 1.5rem;
-    }
-
-    .headerButtons {
-        padding-bottom: 0;
-    }
-
-    .categoryInfo {
-        margin: 0;
-        text-align: left;
-    }
-
-    .sidebar {
-        display: flex;
-        align-self: flex-start;
-        width: var(--category-sidebar-width);
-        padding-top: 4rem;
-    }
+.sidebar {
+    composes: hidden from global;
 
-    .categoryContent {
-        flex-grow: 1;
-    }
+    composes: lg_flex from global;
+    composes: lg_self-start from global;
+    composes: lg_pt-16 from global;
+    composes: lg_w-filterSidebarWidth from global;
 }

package/lib/components/Accordion/accordion.module.css

@@ -1,4 +1,6 @@
 .root {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: rounded-md from global;
 }

package/lib/components/Accordion/section.module.css

@@ -1,42 +1,50 @@
 .root {
-    border-bottom: 2px solid rgb(var(--venia-global-color-gray-400));
+    composes: border-b-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
 }
 
+/* TODO @TW: cannot compose */
 .root:last-of-type {
+    /* composes: border-b-0 from global; */
     border-bottom-width: 0;
 }
 
 .contents_container {
-    padding: 0 1.5rem 1.5rem;
+    composes: pb-sm from global;
+    composes: pt-0 from global;
+    composes: px-sm from global;
 }
 
+/* TODO @TW: cannot compose */
 .contents_container:empty {
     display: none;
 }
 
 .contents_container_closed {
     composes: contents_container;
-    display: none;
+    composes: hidden from global;
 }
 
 .title {
-    font-size: var(--venia-global-fontSize-300);
+    composes: text-lg from global;
 }
 
 .title_container {
-    cursor: pointer;
-    display: block;
-    width: 100%;
-    margin: 0;
+    composes: block from global;
+    composes: cursor-pointer from global;
+    composes: w-full from global;
+    composes: m-0 from global;
 }
 
 .title_wrapper {
-    align-items: center;
-    display: grid;
-    gap: 1.5rem;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-    height: 4.5rem;
-    justify-items: start;
-    padding: 0 1.5rem;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+    composes: h-[4.5rem] from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: px-sm from global;
+    composes: py-0 from global;
 }

package/lib/components/AccountChip/accountChip.module.css

@@ -1,9 +1,9 @@
 .root {
-    align-items: center;
-    column-gap: 0.5rem;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: auto 1fr;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
 }
 
 .loader {

package/lib/components/AccountInformationPage/accountInformationPage.module.css

@@ -1,37 +1,43 @@
 .root {
-    display: grid;
-    padding: 2.5rem 3rem;
-    row-gap: 2rem;
+    composes: grid from global;
+    composes: gap-y-md from global;
+    composes: px-lg from global;
+    composes: py-md from global;
 }
 
 .title {
-    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;
 }
 
 .accountDetails {
-    display: grid;
-    row-gap: 2rem;
-    grid-template-columns: 1fr 1fr 1fr;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+
+    composes: lg_grid-cols-3 from global;
 }
 
 .lineItemsContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-normal from global;
     grid-column: 1 / span 1;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 1fr;
-    line-height: 1.5rem;
+
+    composes: lg_gap-xs from global;
+    composes: lg_grid-cols-2 from global;
 }
 
 .lineItemLabel {
-    font-weight: var(--venia-global-fontWeight-bold);
+    composes: font-bold from global;
 }
 
 .nameLabel,
 .emailLabel,
 .passwordLabel {
-    composes: lineItemLabel;
+    composes: font-bold from global;
 }
 
 .nameValue,
@@ -41,28 +47,9 @@
 
 .editButtonContainer {
     grid-column: 1 / span 1;
-    text-align: center;
+    composes: text-center from global;
 }
 
 .editInformationButton {
     composes: root_normalPriority from '../Button/button.module.css';
 }
-
-@media (min-width: 961px) {
-    .nameLabel,
-    .emailLabel,
-    .passwordLabel {
-        composes: lineItemLabel;
-    }
-}
-
-@media (max-width: 960px) {
-    .accountDetails {
-        grid-template-columns: 1fr;
-    }
-
-    .lineItemsContainer {
-        grid-template-columns: 1fr;
-        grid-gap: 0.75rem;
-    }
-}

package/lib/components/AccountInformationPage/editForm.module.css

@@ -1,12 +1,13 @@
 .root {
-    display: grid;
-    gap: 0.5rem 1.5rem;
-    grid-template-columns: 1fr 1fr;
-    width: 100%;
+    composes: gap-x-2xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-cols-2 from global;
+    composes: w-full from global;
 }
 
 .field {
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
 }
 
 .email,
@@ -16,18 +17,18 @@
 
 .buttons {
     composes: field;
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
-    justify-self: center;
-    padding: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-center from global;
+    composes: p-xs from global;
 }
 
 .changePasswordButtonContainer {
-    padding-top: 1rem;
+    composes: pt-xs from global;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     .firstname,
     .lastname,
     .password,

package/lib/components/AccountInformationPage/editModal.module.css

@@ -1,3 +1,3 @@
 .errorContainer {
-    padding-bottom: 1rem;
+    composes: pb-xs from global;
 }

package/lib/components/AccountMenu/accountMenu.module.css

@@ -1,49 +1,51 @@
 .root {
-    --content-width: 27.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 - 25rem
-    );
-    z-index: 3;
+    width: calc(100vw - 2rem); /* TODO @TW: cannot compose */
     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;
 }
 
 .contents {
-    background-color: rgb(var(--venia-global-color-background));
-    border-radius: 1px;
-    box-shadow: 0 1px 6px rgb(var(--venia-global-color-gray-900) / 0.2);
-    display: grid;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: grid from global;
+    composes: right-0 from global;
+    composes: rounded-sm from global;
+    composes: shadow-menu from global;
+    composes: top-0 from global;
+    composes: w-[27.5rem] from global;
     min-height: 10rem;
-    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 {
@@ -55,16 +57,17 @@
 }
 
 .createAccount {
-    display: grid;
-    gap: 0.9375rem;
-    justify-items: stretch;
-    padding: 1rem 1.5rem;
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
 }
 
 .forgotPassword {
-    padding: 2rem;
+    composes: p-md from global;
 }
 
 .loading {
-    padding: 2rem;
+    composes: p-md from global;
 }

package/lib/components/AccountMenu/accountMenuItems.module.css

@@ -1,26 +1,31 @@
 .root {
-    display: grid;
-    grid-auto-flow: row;
-    justify-content: stretch;
-    row-gap: 1.5rem;
-    padding: 1.5rem;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-stretch from global;
+    composes: p-sm from global;
 }
 
 .link {
-    composes: root from '../LinkButton/linkButton.module.css';
+    composes: cursor-pointer from global;
+    composes: font-semibold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: no-underline from global;
+    composes: pointer-events-auto from global;
+    composes: text-subtle from global;
 
-    color: rgb(var(--venia-global-color-gray-700));
-    justify-content: start;
-    text-decoration: none;
-}
-
-.link:hover {
-    color: rgb(var(--venia-global-color-gray-600));
+    composes: hover_text-colorDefault from global;
 }
 
 .signOut {
     composes: link;
 
-    border-top: 2px solid rgb(var(--venia-global-color-gray));
-    padding-top: 1rem;
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: pt-xs from global;
 }