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

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

@@ -1,106 +1,120 @@
-/* animation helpers */
-
-.enter {
-    transition-duration: 384ms;
-    transition-timing-function: var(--venia-global-anim-in);
-}
-
-.exit {
-    transition-duration: 192ms;
-    transition-timing-function: var(--venia-global-anim-out);
-}
-
-.hidden {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.visible {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* module */
-
 .root {
-    composes: exit hidden;
-    background-color: white;
-    bottom: 0;
-    display: grid;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: fixed from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-menu from global;
     grid-template-rows: auto 1fr auto;
-    left: 0;
-    max-width: 360px;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
     transform: translate3d(-100%, 0, 0);
+    transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
-    width: 100%;
-    z-index: 3;
+    transition-timing-function: var(--venia-global-anim-out);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
 }
 
 .root_open {
-    composes: root enter visible;
-    box-shadow: 1px 0 rgb(var(--venia-global-color-border));
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
     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 {
-    align-content: center;
-    background-color: rgb(var(--venia-global-color-gray));
-    box-shadow: 0 1px rgb(var(--venia-global-color-border));
-    display: grid;
+    composes: bg-subtle from global;
+    composes: content-center from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: h-[3.5rem] from global;
+    composes: relative from global;
+    composes: shadow-thin from global;
+    composes: z-foreground from global;
     grid-auto-columns: 3.5rem;
-    grid-auto-flow: column;
     grid-auto-rows: 3.5rem;
     grid-template-columns: 3.5rem 1fr 3.5rem;
-    height: 3.5rem;
-    position: relative;
-    z-index: 1;
 }
 
 .body {
-    composes: exit visible;
-    min-height: 0;
-    overflow: auto;
+    composes: min-h-0 from global;
+    composes: opacity-100 from global;
+    composes: overflow-auto 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 enter hidden;
+    composes: body;
+
+    composes: opacity-0 from global;
+    transition-duration: 384ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
 }
 
 .footer {
 }
 
 .switchers {
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: space-between;
-    background-color: rgb(var(--venia-global-color-gray-100));
-    width: 100%;
-}
+    composes: bg-gray-100 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-between from global;
+    composes: w-full from global;
 
-@media (min-width: 641px) {
-    .switchers {
-        display: none;
-    }
+    composes: sm_hidden from global;
 }
 
 .modal {
-    composes: exit hidden;
-    background-color: white;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    position: absolute;
-    right: 0;
-    top: 3.5rem;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: left-0 from global;
+    composes: opacity-0 from global;
+    composes: overflow-auto from global;
+    composes: right-0 from global;
+    composes: top-lg 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 enter visible;
+    composes: modal;
+
+    composes: opacity-100 from global;
     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;
 }

package/lib/components/Newsletter/newsletter.module.css

@@ -1,94 +1,89 @@
 .root {
-    position: relative;
-    display: block;
-    gap: 1.5rem;
-    justify-items: stretch;
+    composes: col-span-6 from global;
+    composes: gap-none from global;
+    composes: grid from global;
+    composes: items-start from global;
+    composes: max-w-[20rem] from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+
+    composes: sm_col-span-3 from global;
 }
 
 .form {
-    display: grid;
-    row-gap: 0.9375rem;
-    position: relative;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: relative from global;
 }
 
+/* TODO @TW: cannot compose */
 .form input {
+    /* TODO @TW: review */
     padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem);
 }
 
+@media (max-width: 799px) {
+    /* TODO @TW: cannot compose */
+    .form input {
+        /* TODO @TW: review */
+        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+    }
+}
+
+/* TODO @TW: cannot compose */
 .form label {
     position: absolute;
-    z-index: -11111;
+    z-index: -1;
+    /* composes: z-behind from global; */
 }
 
 .buttonsContainer {
-    gap: 1.5rem;
-    grid-auto-flow: row;
-    justify-content: center;
-    margin-top: 1rem;
-    width: 100%;
-    display: none;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
+
+    composes: md_hidden from global;
 }
 
 .title {
-    color: rgb(var(--venia-global-color-gray-900));
-    font-size: var(--venia-typography-body-S-fontSize);
-    font-weight: 600;
-    margin-bottom: 15px;
-    display: block;
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: mb-xs from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
 }
 
 .subscribe_link {
-    display: inline-block;
-    position: absolute;
-    right: 4px;
-    top: 0;
-    transform: translateY(7%);
-    max-height: 35px;
-    padding: 0 10px;
-    background: rgb(var(--venia-global-color-gray-50));
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: hidden from global;
+    composes: max-h-[35px] from global;
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: right-1 from global;
+    composes: text-colorDefault from global;
+    composes: top-0 from global;
+    composes: underline from global;
     min-height: 35px;
-}
-
-.subscribe_link span {
-    display: inline-block;
-    color: rgb(var(--venia-global-color-text));
-    text-decoration: underline;
-    text-shadow: 0px 0px 0px;
-}
+    transform: translateY(7%);
 
-.subscribe_link:hover span {
-    color: rgb(var(--stroke));
+    composes: md_inline-block from global;
 }
 
 .newsletter_text {
-    margin-bottom: 20px;
+    composes: mb-sm from global;
 }
 
 .loadingContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    background: rgba(252, 252, 252, 0.75);
-}
-
-@media screen and (max-width: 767px) {
-    .buttonsContainer {
-        display: grid;
-    }
-
-    .subscribe_link {
-        display: none;
-    }
-
-    .root {
-        text-align: center;
-        grid-column: span 2;
-    }
-
-    .form input {
-        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
-    }
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: opacity-75 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-mask from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/billingInformation.module.css

@@ -1,9 +1,9 @@
 .root {
-    display: grid;
-    row-gap: 0.375rem;
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
 }
 
 .heading {
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.375rem;
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/item.module.css

@@ -1,9 +1,18 @@
 .root {
-    display: grid;
-    grid-template-columns: auto repeat(3, 1fr) auto;
-    grid-template-rows: auto 1fr;
-    row-gap: 0.375rem;
-    column-gap: 1rem;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-rows-autoFirst from global;
+    composes: gap-y-2 from global;
+    composes: gap-x-4 from global;
+
+    composes: lg_gap-y-1.5 from global;
+}
+
+@media (min-width: 960px) {
+    .root {
+        grid-template-columns: auto repeat(3, 1fr) auto;
+        grid-template-rows: repeat(5, auto);
+    }
 }
 
 .thumbnailContainer {
@@ -11,29 +20,16 @@
 }
 
 .nameContainer {
+    composes: font-bold from global;
     grid-column: 2 / -1;
-    font-weight: var(--venia-global-fontWeight-bold);
 }
 
 .buyAgainButton {
-    align-self: start;
-    grid-column-end: -1;
-    text-decoration: underline;
-    /** Hide until PWA-979 is completed */
-    visibility: hidden;
-}
-
-@media (max-width: 960px) {
-    .root {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        grid-template-rows: repeat(5, auto);
-        row-gap: 0.5rem;
-        column-gap: 1rem;
-    }
+    composes: col-auto from global;
+    composes: invisible from global; /* Hide until PWA-979 is completed */
+    composes: justify-self-start from global;
+    composes: self-start from global;
+    composes: underline from global;
 
-    .buyAgainButton {
-        grid-column-end: auto;
-        justify-self: start;
-    }
+    composes: lg_col-end-[-1] from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/items.module.css

@@ -1,20 +1,16 @@
 .root {
-    padding-right: 1.5rem;
+    composes: pr-0 from global;
+
+    composes: lg_grid from global;
+    composes: lg_pr-sm from global;
 }
 
 .heading {
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.75rem;
+    composes: font-bold from global;
+    composes: pb-3 from global;
 }
 
 .itemsContainer {
-    display: grid;
-    row-gap: 2.5rem;
-}
-
-@media (max-width: 960px) {
-    .root {
-        display: grid;
-        padding-right: 0rem;
-    }
+    composes: grid from global;
+    composes: gap-y-md from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css

@@ -1,6 +1,8 @@
 .root {
-    display: grid;
-    gap: 2rem;
+    composes: gap-sm from global;
+    composes: grid from global;
+
+    composes: lg_gap-md from global;
 }
 
 .shippingInformationContainer {
@@ -31,42 +33,38 @@
 .orderTotalContainer {
     grid-row: 2 / span 2;
     grid-column: 3 / span 2;
+    composes: m-0 from global;
+    composes: max-w-none from global;
+    composes: min-w-none from global;
 
-    min-width: 22rem;
-    max-width: 25rem;
-    margin: auto;
+    composes: lg_m-auto from global;
+    composes: lg_max-w-[25rem] from global;
+    composes: lg_min-w-[22rem] from global;
 }
 
 .printButton {
     grid-row: 4 / span 1;
     grid-column: 3 / span 2;
 
-    align-items: center;
-    column-gap: 0.5rem;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: auto 1fr;
-    width: fit-content;
-    margin: auto;
-    /** Hide until PWA-978 is completed */
-    visibility: hidden;
+    composes: items-center from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-flow-col from global;
+    composes: invisible from global; /* Hide until PWA-978 is completed */
+    composes: m-auto from global;
+    composes: w-fit from global;
 }
 
 .printLabel {
-    text-decoration: underline;
+    composes: underline from global;
 }
 
 /*
  * Mobile-specific styles.
  */
 
-@media (max-width: 960px) {
-    .root {
-        display: grid;
-        column-gap: 0rem;
-        gap: 1.5rem;
-    }
-
+@media (max-width: 959px) {
     .shippingInformationContainer {
         grid-row: 1 / span 1;
         grid-column: 1 / span 1;
@@ -95,10 +93,6 @@
     .orderTotalContainer {
         grid-row: 6 / span 1;
         grid-column: 1 / span 1;
-
-        min-width: 0rem;
-        max-width: none;
-        margin: unset;
     }
 
     .printButton {

package/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css

@@ -1,51 +1,50 @@
 .root {
-    display: grid;
-    gap: 1rem;
-    padding: 2rem;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
+    composes: border-0 from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+    composes: rounded-none from global;
+
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_p-md from global;
+    composes: lg_rounded-md from global;
 }
 
 .heading {
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.5rem;
+    composes: font-bold from global;
+    composes: pb-2xs from global;
 }
 
 .subTotal {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }
 
 .discount {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }
 
 .tax {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }
 
 .shipping {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }
 
 .total {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1rem;
-    font-weight: var(--venia-global-fontWeight-bold);
-}
-
-@media (max-width: 960px) {
-    .root {
-        border: none;
-        border-radius: 0rem;
-        padding: 1rem 0rem;
-    }
+    composes: font-bold from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/paymentMethod.module.css

@@ -1,12 +1,12 @@
 .root {
-    display: grid;
-    row-gap: 0.375rem;
+    composes: gap-y-1.5 from global;
+    composes: grid from global;
 }
 
 .heading {
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
     grid-row: 1 / span 1;
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.375rem;
 }
 
 .payment_type {

package/lib/components/OrderHistoryPage/OrderDetails/shippingInformation.module.css

@@ -1,9 +1,9 @@
 .root {
-    display: grid;
-    row-gap: 0.375rem;
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
 }
 
 .heading {
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.375rem;
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
 }

package/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css

@@ -1,18 +1,19 @@
 .root {
-    display: grid;
-    row-gap: 0.375rem;
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
 }
 
 .heading {
-    font-weight: var(--venia-global-fontWeight-bold);
-    padding-bottom: 0.375rem;
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
 }
 
+/* TODO @TW: cannot compose */
 .method:empty {
     display: none;
 }
 
 .tracking {
-    display: grid;
-    row-gap: 0.375rem;
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
 }