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

package/lib/components/CheckoutPage/ItemsReview/itemsReview.module.css

@@ -1,17 +1,20 @@
 .items_review_container {
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: rounded-md from global;
     min-height: 2rem;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
 }
 
 .items_container {
-    display: grid;
-    padding: 1.5rem 2rem;
+    composes: grid from global;
+    composes: px-md from global;
+    composes: py-sm from global;
 }
 
 .total_quantity {
 }
 
 .total_quantity_amount {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }

package/lib/components/CheckoutPage/ItemsReview/showAllButton.module.css

@@ -1,24 +1,28 @@
 .root {
-    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
-    padding: 0.75rem 0;
-    width: 100%;
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: px-0 from global;
+    composes: py-3 from global;
+    composes: w-full from global;
 }
 
 .content {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 0.375rem;
-    justify-content: center;
-    align-items: center;
+    composes: gap-1.5 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-center from global;
 }
 
 .text {
-    font-size: var(--venia-global-fontSize-100);
-    font-weight: var(--venia-global-fontWeight-semibold);
-    color: rgb(var(--venia-brand-color-1-700));
+    composes: font-semibold from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
 }
 
 .arrowDown {
     composes: root from '../../Icon/icon.module.css';
+
     --stroke: rgb(var(--venia-brand-color-1-700));
 }

package/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.module.css

@@ -1,38 +1,24 @@
 .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: pt-xs from global;
+
+    composes: lg_pt-0 from global;
+    composes: lg_sticky from global;
+    composes: lg_top-22 from global;
 }
 
 .form {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
 }
 
 .actions {
-    text-align: center;
+    composes: text-center from global;
 }
 
 .create_account_button {
     composes: root_normalPriority from '../../Button/button.module.css';
 }
-
-/*
- * Desktop specific styles
- */
-@media (min-width: 961px) {
-    .root {
-        position: sticky;
-        top: 5.5rem;
-    }
-}
-
-/*
- * Mobile-specific styles.
- */
-@media (max-width: 960px) {
-    .root {
-        padding-top: 1rem;
-    }
-}

package/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.module.css

@@ -1,30 +1,43 @@
+/* prettier-ignore */
 .root {
-    padding: 2.5rem 3rem;
-    max-width: 1080px;
-    margin: 0 auto;
-
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: 2fr 1fr;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: max-w-screen-lg from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+    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;
 }
 
 .mainContainer {
-    grid-column: 1;
-
-    display: grid;
-    row-gap: 1rem;
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: gap-y-xs from global;
 }
 
 .sidebarContainer {
-    grid-column: 2;
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: col-start-1 from global;
+
+    composes: lg_border-0 from global;
+    composes: lg_col-start-2 from global;
 }
 
 .header {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .text {
-    line-height: 1.5em;
+    composes: leading-normal from global;
 }
 
 .orderNumber {
@@ -37,11 +50,11 @@
 
 .shippingInfo {
     composes: text;
-    display: grid;
+    composes: grid from global;
 }
 
 .shippingAddress {
-    display: grid;
+    composes: grid from global;
 }
 
 .shippingMethodHeading {
@@ -55,24 +68,3 @@
 .additionalText {
     composes: text;
 }
-
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-        /* Only one column in mobile view. */
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-
-    .sidebarContainer {
-        grid-column: 1;
-        grid-row: auto;
-        height: auto;
-        border-top: 1px solid rgb(var(--venia-global-color-border));
-    }
-}

package/lib/components/CheckoutPage/OrderSummary/orderSummary.module.css

@@ -1,23 +1,18 @@
 .root {
-    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
-    margin-top: 1rem;
-    padding-top: 2rem;
-}
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: mt-xs from global;
+    composes: pt-md from global;
 
-@media (min-width: 961px) {
-    .root {
-        margin-top: 0;
-        border: 2px solid rgb(var(--venia-global-color-gray-400));
-        border-radius: 0.375rem;
-        padding: 2rem;
-    }
+    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_mt-0 from global;
+    composes: lg_p-md from global;
 }
 
 .title {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    white-space: nowrap;
+    composes: sr-only from global;
 }

package/lib/components/CheckoutPage/PaymentInformation/braintreeDropin.module.css

@@ -2,22 +2,25 @@
 }
 
 .error {
-    color: var(--venia-global-color-error);
+    composes: text-error from global;
 }
 
+/* TODO @TW: cannot compose */
 div[data-braintree-id='card'] {
     border: none;
 }
 
+/* TODO @TW: cannot compose */
 div[data-braintree-id='card-sheet-header'] {
     display: none;
 }
 
+/* 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 0rem 0rem 0rem;
+    padding: 1rem 0 0 0;
 }

package/lib/components/CheckoutPage/PaymentInformation/braintreeSummary.module.css

@@ -1,74 +1,60 @@
 .root {
-    display: grid;
-    gap: 1.125rem;
-    padding: 2rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: p-md from global;
 }
 
 .loading {
     composes: root from '../../LoadingIndicator/indicator.module.css';
-    text-align: center;
+
+    composes: text-center from global;
 }
 
 .heading_container {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
 }
 
 .edit_button {
-    color: rgb(var(--venia-brand-color-1-700));
-    padding: 1rem;
-    margin: -1rem;
+    composes: p-xs from global;
+    composes: -m-xs from global;
+    composes: text-brand-dark from global;
 }
 
 .heading {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .address_summary_container {
-    display: grid;
-    row-gap: 0.5rem;
-}
-
-.first_name {
-    padding-right: 5px;
-}
-
-.last_name {
-    padding-right: 5px;
-}
-
-.street1 {
-    padding-right: 5px;
-}
-
-.street2 {
-    padding-right: 5px;
+    composes: grid from global;
+    composes: gap-y-2xs from global;
 }
 
-.city {
-    padding-right: 5px;
+.first_name,
+.last_name,
+.street1,
+.street2,
+.city,
+.state,
+.postalCode,
+.country {
+    composes: pr-1 from global;
 }
 
-.state {
-    padding-right: 5px;
+.edit_icon {
+    composes: stroke-brand-base from global;
 }
 
-.postalCode {
-    padding-right: 5px;
-}
+.edit_text {
+    composes: hidden from global;
 
-.country {
-    padding-right: 5px;
-}
-
-.edit_icon {
-    stroke: rgb(var(--venia-brand-color-1-700));
+    composes: lg_inline from global;
 }
 
 .card_details_container {
-    display: grid;
-    gap: 0.5rem;
+    composes: grid from global;
+    composes: gap-2xs from global;
 }
 
 .payment_type {
@@ -76,9 +62,3 @@
 
 .payment_details {
 }
-
-@media (max-width: 960px) {
-    .edit_text {
-        display: none;
-    }
-}

package/lib/components/CheckoutPage/PaymentInformation/creditCard.module.css

@@ -2,8 +2,8 @@
 }
 
 .credit_card_root {
-    visibility: visible;
-    opacity: 1;
+    composes: visible from global;
+    composes: opacity-100 from global;
     transition-delay: 64ms;
     transition-duration: 384ms;
     transition-property: opacity, visbility;
@@ -11,35 +11,39 @@
 }
 
 .credit_card_root_hidden {
-    overflow: hidden;
-    visibility: hidden;
-    height: 0;
-    opacity: 0;
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
 }
 
 .dropin_root {
 }
 
 .billing_address_fields_root {
-    display: grid;
-    gap: 0.9375rem 1.5rem;
-    padding: 1rem 0rem;
+    composes: gap-x-xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
 }
 
 .billing_address_fields_root_hidden {
-    overflow: hidden;
-    visibility: hidden;
-    height: 0;
-    opacity: 0;
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
 }
 
 .formErrorContainer {
-    padding-top: 1.5rem;
+    composes: pt-sm from global;
 }
 
 .first_name,
 .last_name {
-    grid-column-end: span 1;
+    composes: col-end-span2 from global;
+
+    composes: lg_col-end-span1 from global;
 }
 
 .country,
@@ -50,23 +54,5 @@
 .region,
 .postal_code,
 .phone_number {
-    grid-column-end: span 2;
-}
-
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .first_name,
-    .last_name,
-    .city,
-    .region,
-    .postal_code,
-    .phone_number,
-    .street1,
-    .street2,
-    .address_check {
-        grid-column-end: span 2;
-    }
+    composes: col-end-span2 from global;
 }

package/lib/components/CheckoutPage/PaymentInformation/editCard.module.css

@@ -1,4 +1,5 @@
 .root {
-    overflow: auto;
-    padding: 0.5rem 1rem;
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
 }

package/lib/components/CheckoutPage/PaymentInformation/paymentInformation.module.css

@@ -1,25 +1,24 @@
 .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
 }
 
 .payment_info_container {
-    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;
 }
 
 .loading {
     composes: root from '../../LoadingIndicator/indicator.module.css';
-    text-align: center;
+
+    composes: text-center from global;
 }
 
-/*
- * Mobile-specific styles.
- */
+.heading {
+    composes: border-0 from global;
 
-@media (max-width: 960px) {
-    .heading {
-        border-width: 0;
-    }
+    composes: lg_border from global;
 }

package/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css

@@ -1,33 +1,36 @@
 .root {
-    display: grid;
-    padding: 2rem;
-    padding-bottom: 1rem;
+    composes: grid from global;
+    composes: p-md from global;
+    composes: pb-xs from global;
 }
 
 .radio_group {
-    display: grid;
+    composes: grid from global;
 }
 
 .payment_method {
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-}
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-xs from global;
+    composes: pt-xs from global;
 
-.payment_method:not(:first-child) {
-    padding-top: 1rem;
+    composes: last_pt-0 from global;
 }
 
+/* TODO @TW: cannot compose */
 .payment_method:last-of-type {
+    /* composes: border-b-0 from global; */
     border-bottom-width: 0;
 }
 
 .radio_label {
-    font-weight: 600;
-    justify-self: start;
+    composes: font-semibold from global;
+    composes: justify-self-start from global;
 }
 
 .payment_errors {
-    display: grid;
-    gap: 0.5em;
-    color: rgb(var(--venia-global-color-error));
+    composes: grid from global;
+    composes: gap-2xs from global;
+    composes: text-error from global;
 }

package/lib/components/CheckoutPage/PaymentInformation/summary.module.css

@@ -1,22 +1,22 @@
 .root {
-    display: grid;
-    gap: 1.125rem;
-    padding: 2rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: p-md from global;
 }
 
 .heading_container {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
 }
 
 .heading {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .card_details_container {
-    display: grid;
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
 }
 
 .payment_details {

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css

@@ -1,12 +1,13 @@
 .root {
-    display: grid;
-    gap: 0.9375rem 1.5rem;
-    grid-template-columns: 1fr 1fr;
-    width: 100%;
+    composes: gap-x-xs 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;
 }
 
 .formMessage,
@@ -23,24 +24,25 @@
 
 .defaultShipping {
     composes: field;
-    padding-top: 1rem;
+
+    composes: pt-xs from global;
 }
 
 .firstname,
 .lastname {
-    grid-column-end: span 1;
+    composes: col-end-span1 from global;
 }
 
 .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;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
     }