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

package/lib/components/Checkout/paymentsForm.module.css

@@ -7,7 +7,8 @@
 
 .body {
     composes: body from './flow.module.css';
-    height: 30rem;
+
+    composes: h-[30rem] from global;
 }
 
 .footer {
@@ -15,21 +16,21 @@
 }
 
 .textInput {
-    background: white;
-    border: 1px solid rgb(var(--venia-global-color-text-alt));
-    border-radius: 2px;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-flex;
-    flex: 0 0 100%;
-    font-size: 0.9375rem;
-    height: 2.25rem;
-    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
-    width: 100%;
-}
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-input from global;
+    composes: flex-textInput from global;
+    composes: h-[2.25rem] from global;
+    composes: inline-flex from global;
+    composes: rounded-sm from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+    composes: w-full from global;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */
 
-.textInput:focus {
-    border-color: rgb(var(--venia-global-color-text));
-    outline: 0 none;
+    composes: focus_border-strong from global;
+    composes: focus_outline-none from global;
 }
 
 /* Fields. */
@@ -37,18 +38,18 @@
 .city,
 .postcode,
 .region_code {
-    grid-column-end: span 1;
+    composes: col-end-span1 from global;
 }
 
 .address_check,
 .email,
 .braintree,
 .street0 {
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
 }
 
 .postcode {
-    margin-bottom: 6px;
+    composes: mb-1.5 from global;
 }
 
 .braintree {
@@ -56,9 +57,9 @@
 }
 
 .validation {
-    color: rgb(var(--venia-global-color-error));
-    font-size: 0.8125rem;
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
+    composes: text-error from global;
+    composes: text-sm from global;
 }
 
 /* Braintree-specific styles. */
@@ -77,6 +78,7 @@
     z-index: unset;
 }
 
+/* TODO @TW: cannot compose */
 :global .braintree-placeholder {
     display: none;
 }

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

@@ -1,47 +1,46 @@
 .root {
-    display: block;
-    width: 100%;
-    background-color: white;
-    border: none;
-}
-.root:focus {
-    background-image: radial-gradient(
-        circle,
-        rgb(var(--venia-global-color-gray)),
-        white
-    );
-    outline: 0 none;
+    composes: bg-white from global;
+    composes: block from global;
+    composes: border-0 from global;
+    composes: w-full from global;
+
+    composes: focus_bg-gradient-radial from global;
+    composes: focus_outline-none from global;
 }
 
 .content {
-    align-items: center;
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: mx-sm from global;
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+    composes: text-left from global;
     grid-template-columns: 5rem 1fr 2rem;
-    justify-items: start;
-    margin: 0 1.5rem;
     min-height: 4.5rem;
-    padding: 1rem 0;
-    text-align: left;
 }
 
 .label {
-    color: rgb(var(--venia-global-color-teal));
-    font-size: 14px;
-    font-weight: 600;
+    composes: font-semibold from global;
+    composes: text-brand from global;
+    composes: text-sm from global;
 }
 
 .summary {
-    font-size: 13px;
-    justify-self: stretch;
-    line-height: 1.5;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    composes: justify-self-stretch from global;
+    composes: leading-normal from global;
+    composes: overflow-hidden from global;
+    composes: overflow-ellipsis from global;
+    composes: text-sm from global;
+    composes: whitespace-nowrap from global;
 }
 
 .icon {
-    justify-self: center;
+    composes: justify-self-center from global;
 }

package/lib/components/Checkout/shippingForm.module.css

@@ -15,5 +15,5 @@
 
 /* fields */
 .shippingMethod {
-    grid-column-end: span 1;
+    composes: col-end-span1 from global;
 }

package/lib/components/CheckoutPage/AddressBook/addressBook.module.css

@@ -1,87 +1,78 @@
 .root {
-    display: none;
+    composes: hidden from global;
 }
 
+/* prettier-ignore */
 .root_active {
-    composes: root;
-    align-items: center;
-    display: grid;
-    grid-template-areas:
-        'header buttons'
-        'content content';
-    grid-template-columns: auto auto;
-    grid-template-rows: 60px 1fr;
-    justify-content: space-between;
-    row-gap: 1rem;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+
+    composes: lg_grid-cols-autoAuto from global;
 }
 
 .headerText {
-    grid-area: header;
-    color: rgb(var(--venia-global-color-text-alt));
-    line-height: 1.25em;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-tight from global;
+    composes: min-h-[3.5rem] from global;
+    composes: row-start-1 from global;
+    composes: text-subtle from global;
 }
 
 .buttonContainer {
-    column-gap: 1rem;
-    display: grid;
-    grid-area: buttons;
-    grid-auto-flow: column;
-    justify-content: end;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-2 from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: min-h-[3.5rem] from global;
+    composes: row-start-3 from global;
+
+    composes: xs_grid-cols-auto from global;
+    composes: lg_justify-end from global;
+    composes: lg_row-start-1 from global;
 }
 
-@media (max-width: 360px) {
-    .buttonContainer {
-        grid-template-columns: 1fr 1fr;
-    }
+@media (max-width: 479px) {
+    /* TODO @TW: cannot compose */
     .buttonContainer button {
         min-width: 8rem;
     }
 }
 
 .content {
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 1rem;
-    grid-area: content;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-0 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: gap-xs from global;
+    composes: pt-0 from global;
+    composes: row-start-2 from global;
     grid-auto-rows: minmax(6rem, max-content);
-    grid-template-columns: 1fr 1fr 1fr;
-    padding-top: 2rem;
+
+    composes: lg_border-top-1 from global;
+    composes: lg_col-span-2 from global;
+    composes: lg_grid-cols-3 from global;
+    composes: lg_pt-md from global;
 }
 
 .addButton {
-    border: 2px dashed rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
+    composes: border-2 from global;
+    composes: border-dashed from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
     transition: border-color 384ms var(--venia-global-anim-standard);
-    color: rgb(var(--venia-brand-color-1-700));
-}
-
-.addButton:focus {
-    outline: none;
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
-.addButton:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
-}
-
-@media (max-width: 960px) {
-    .root_active {
-        grid-template-areas:
-            'header'
-            'content'
-            'buttons';
-        grid-template-columns: 1fr;
-        grid-template-rows: 60px 1fr 60px;
-    }
 
-    .buttonContainer {
-        justify-content: center;
-    }
+    composes: focus_outline-none from global;
+    composes: focus_shadow-buttonFocus from global;
 
-    .content {
-        border-top: none;
-        grid-template-columns: 1fr;
-        padding-top: 0;
-    }
+    composes: hover_border-brand-dark from global;
 }

package/lib/components/CheckoutPage/AddressBook/addressCard.module.css

@@ -1,28 +1,33 @@
 .root {
-    align-content: flex-start;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    box-shadow: none;
-    cursor: pointer;
-    display: grid;
-    font-size: 1rem;
-    padding: 1rem 1.25rem;
-    position: relative;
-    row-gap: 0.5rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: content-start from global;
+    composes: cursor-pointer from global;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: outline-none from global;
+    composes: px-5 from global;
+    composes: py-xs from global;
+    composes: relative from global;
+    composes: rounded-md from global;
+    composes: shadow-none from global;
+    composes: text-colorDefault from global;
     transition: border-color 384ms var(--venia-global-anim-in);
-    outline: none;
-}
 
-@media (min-width: 961px) {
-    .root {
-        padding: 1.25rem 2rem;
-    }
+    composes: focus_shadow-buttonFocus from global;
+
+    composes: hover_border-brand-dark from global;
+
+    composes: lg_px-md from global;
+    composes: lg_py-xs from global;
 }
 
 .root_selected {
     composes: root;
-    border-color: rgb(var(--venia-brand-color-1-600));
-    cursor: default;
+
+    composes: border-brand-dark from global;
+    composes: cursor-default from global;
 }
 
 .root_updated {
@@ -30,30 +35,18 @@
     animation: flash var(--venia-global-anim-bounce) 640ms 2;
 }
 
-.root:focus {
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
-
-.root:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
-}
-
 .defaultCard {
     grid-area: 1 / 1;
 }
 
 .editButton {
-    padding: 1rem;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
+    composes: absolute from global;
+    composes: p-xs from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
 
-@media (min-width: 961px) {
-    .editButton {
-        right: 0.375rem;
-        top: 0.375rem;
-    }
+    composes: lg_right-1.5 from global;
+    composes: lg_top-1.5 from global;
 }
 
 .editButton:hover {
@@ -61,28 +54,31 @@
 }
 
 .editIcon {
-    stroke: rgb(var(--venia-brand-color-1-700));
+    composes: stroke-brand-base from global;
     fill: var(--fill, white);
     transition: fill 384ms var(--venia-global-anim-standard);
 }
 
 .defaultBadge {
-    width: max-content;
-    padding: 0.375rem 1.5rem;
-    margin-bottom: 0.25rem;
-    border: 1px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 600;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: mb-1 from global;
+    composes: px-sm from global;
+    composes: py-1.5 from global;
+    composes: rounded-md from global;
+    composes: text-xs from global;
+    composes: w-max from global;
 }
 
 .name {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .address {
-    display: grid;
-    gap: 0.5rem;
+    composes: gap-2xs from global;
+    composes: grid from global;
 }
 
 @keyframes flash {

package/lib/components/CheckoutPage/BillingAddress/billingAddress.module.css

@@ -1,23 +1,27 @@
 .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,
@@ -28,23 +32,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/GuestSignIn/guestSignIn.module.css

@@ -1,53 +1,55 @@
 .root {
-    display: grid;
+    composes: grid from global;
     grid-template-columns: minmax(auto, 512px);
-    justify-content: center;
-    row-gap: 2rem;
-    text-align: center;
+    composes: justify-center from global;
+    composes: gap-y-md from global;
+    composes: text-center from global;
 }
 
 .root_hidden {
     composes: root;
-    display: none;
+
+    composes: hidden from global;
 }
 
 .header {
-    font-family: var(--venia-global-fontFamily-serif);
+    composes: font-serif from global;
 }
 
 .contentContainer {
-    border: 2px solid rgb(var(--venia-global-color-border));
-    border-radius: 0.375rem;
-    padding-bottom: 2rem;
+    composes: border-0 from global;
+    composes: p-0 from global;
+    composes: rounded-md 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;
 }
 
 .signInRoot {
     composes: root from '../../SignIn/signIn.module.css';
+
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_p-0 from global;
 }
 
 .forgotPasswordRoot {
     composes: root from '../../ForgotPassword/forgotPassword.module.css';
+
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_p-0 from global;
 }
 
 .createAccountRoot {
     composes: root from '../../CreateAccount/createAccount.module.css';
-}
-
-@media (max-width: 960px) {
-    .contentContainer {
-        border: none;
-        padding: 0;
-    }
-
-    .signInRoot {
-        padding: 1rem 0;
-    }
 
-    .forgotPasswordRoot {
-        padding: 1rem 0;
-    }
+    composes: px-0 from global;
+    composes: py-xs from global;
 
-    .createAccountRoot {
-        padding: 1rem 0;
-    }
+    composes: lg_p-0 from global;
 }

package/lib/components/CheckoutPage/ItemsReview/item.js

@@ -18,7 +18,7 @@ const Item = props => {
         configurableThumbnailSource
     } = props;
     const classes = useStyle(defaultClasses, propClasses);
-    const className = isHidden ? classes.root_hidden : classes.root;
+    const className = isHidden ? classes.root_hidden : classes.root_visible;
     const configured_variant = configuredVariant(configurable_options, product);
     return (
         <div className={className}>

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

@@ -1,49 +1,60 @@
 .root {
-    display: grid;
-    grid-template-columns: auto 1fr;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: overflow-hidden from global;
+
     grid-template-rows: auto auto 1fr;
-    column-gap: 1rem;
-    opacity: 1;
-    visibility: visible;
     transition-delay: 64ms;
     transition-duration: 384ms;
     transition-property: opacity, visbility;
     transition-timing-function: var(--venia-global-anim-standard);
-    margin-top: 1.5rem;
+}
+
+.root_visible {
+    composes: root;
+
+    composes: h-auto from global;
+    composes: mt-sm from global;
+    composes: opacity-100 from global;
+    composes: visible from global;
 }
 
 .root_hidden {
     composes: root;
-    opacity: 0;
-    visibility: hidden;
-    height: 0;
-    margin-top: 0rem;
+
+    composes: h-0 from global;
+    composes: invisible from global;
+    composes: mt-0 from global;
+    composes: opacity-0 from global;
 }
 
 .thumbnail {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
     grid-column: 1 / span 1;
     grid-row: 1 / span 3;
-    border: solid 1px rgb(var(--venia-global-color-border));
 }
 
 .name {
-    font-weight: 600;
+    composes: font-semibold from global;
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
 }
 
 .quantity {
+    composes: mt-xs from global;
+    composes: text-sm from global;
     grid-column: 2 / span 1;
     grid-row: 3 / span 1;
-    font-size: 85%;
-    margin-top: 1rem;
 }
 
 .options {
-    display: grid;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: mt-xs from global;
+    composes: text-sm from global;
     grid-column: 2 / span 1;
     grid-row: 2 / span 1;
-    gap: 0.5rem;
-    font-size: 85%;
-    margin-top: 1rem;
 }