@magento/venia-ui 10.3.0 → 11.3.0-beta.1

package/lib/components/CheckoutPage/GuestSignIn/guestSignIn.module.css

@@ -9,7 +9,7 @@
 .root_hidden {
     composes: root;
 
-    composes: hidden from global;
+    @apply hidden;
 }
 
 .header {
@@ -19,7 +19,7 @@
 .contentContainer {
     composes: border-0 from global;
     composes: p-0 from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 
     composes: lg_border-2 from global;
     composes: lg_border-solid from global;
@@ -30,26 +30,26 @@
 .signInRoot {
     composes: root from '../../SignIn/signIn.module.css';
 
-    composes: px-0 from global;
-    composes: py-xs from global;
+    @apply px-0;
+    @apply py-xs;
 
-    composes: lg_p-0 from global;
+    @apply lg_p-0;
 }
 
 .forgotPasswordRoot {
     composes: root from '../../ForgotPassword/forgotPassword.module.css';
 
-    composes: px-0 from global;
-    composes: py-xs from global;
+    @apply px-0;
+    @apply py-xs;
 
-    composes: lg_p-0 from global;
+    @apply lg_p-0;
 }
 
 .createAccountRoot {
     composes: root from '../../CreateAccount/createAccount.module.css';
 
-    composes: px-0 from global;
-    composes: py-xs from global;
+    @apply px-0;
+    @apply py-xs;
 
-    composes: lg_p-0 from global;
+    @apply lg_p-0;
 }

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

@@ -2,7 +2,7 @@
     composes: border-2 from global;
     composes: border-solid from global;
     composes: border-subtle from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     min-height: 2rem;
 }
 

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

@@ -10,8 +10,7 @@
     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_grid-cols-[2fr_1fr] from global;
     composes: lg_px-lg from global;
     composes: lg_py-md from global;
 }

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

@@ -8,7 +8,7 @@
     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_rounded-box from global;
     composes: lg_mt-0 from global;
     composes: lg_p-md from global;
 }

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

@@ -5,22 +5,22 @@
     composes: text-error from global;
 }
 
-/* TODO @TW: cannot compose */
 div[data-braintree-id='card'] {
-    border: none;
+    @apply border-0;
 }
 
-/* TODO @TW: cannot compose */
 div[data-braintree-id='card-sheet-header'] {
-    display: none;
+    @apply hidden;
 }
 
-/* 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 0 0 0;
+    @apply pt-4;
+    @apply pr-0;
+    @apply pb-0;
+    @apply pl-0;
 }

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

@@ -8,7 +8,7 @@
     composes: border-2 from global;
     composes: border-solid from global;
     composes: border-subtle from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 }
 
 .loading {

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

@@ -16,10 +16,8 @@
     composes: pt-xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .payment_method:last-of-type {
-    /* composes: border-b-0 from global; */
-    border-bottom-width: 0;
+    @apply border-b-0;
 }
 
 .radio_label {

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

@@ -42,12 +42,12 @@
     composes: p-xs from global;
 }
 
-.regionError {
-    color: brown;
-    font-weight: 600;
-}
+@media screen(-lg) {
+    .regionError {
+        color: brown;
+        font-weight: 600;
+    }
 
-@media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
     }

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

@@ -36,12 +36,12 @@
     composes: p-xs from global;
 }
 
-.regionError {
-    color: brown;
-    font-weight: 600;
-}
+@media screen(-lg) {
+    .regionError {
+        color: brown;
+        font-weight: 600;
+    }
 
-@media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
     }

package/lib/components/CheckoutPage/ShippingInformation/editModal.module.css

@@ -18,9 +18,7 @@
     transition-timing-function: var(--venia-global-anim-out);
     transition-property: opacity, transform, visibility;
 
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
+    @apply invisible;
 
     composes: lg_h-auto from global;
     composes: lg_max-h-modal from global;
@@ -28,13 +26,13 @@
     composes: lg_top-[5vh] from global;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .root {
         transform: translate3d(100%, 0, 0);
     }
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     /* TODO @TW: review */
     .root {
         left: calc(50% - 370px);
@@ -44,18 +42,16 @@
 .root_open {
     composes: root;
 
-    composes: opacity-100 from global;
+    @apply opacity-100;
     composes: shadow-modal from global;
     transform: scale(1);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
 
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    @apply visible;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .root_open {
         composes: root;
 

package/lib/components/CheckoutPage/ShippingInformation/shippingInformation.module.css

@@ -1,22 +1,18 @@
 .root {
-    /* TODO @TW: review (B6) */
     composes: border-2 from global;
     composes: border-solid from global;
     composes: border-subtle from global;
     composes: p-md from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 }
 
 .root_editMode {
     composes: root;
 
-    /* TODO @TW: review (B6) */
-    composes: border-0 from global;
-    composes: border-b-2 from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: p-0 from global;
-    composes: rounded-none from global;
+    @apply border-0;
+    @apply border-b-2;
+    @apply p-0;
+    @apply rounded-none;
 }
 
 .root_updated {

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.module.css

@@ -5,15 +5,13 @@
     composes: grid from global;
     composes: gap-y-xs from global;
     composes: p-md from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 }
 
 .done {
     composes: root;
 
     composes: border-2 from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
 }
 
 .editingHeading {

package/lib/components/CheckoutPage/checkoutPage.module.css

@@ -8,21 +8,19 @@
     composes: lg_px-lg from global;
 }
 
-/* prettier-ignore */
 .checkoutContent {
     composes: gap-xs from global;
     composes: grid from global;
     composes: grid-cols-1 from global;
 
     composes: lg_gap-md from global;
-    /* TODO @TW: review (B7) */
-    composes: lg_grid-cols-[2fr,1fr] from global;
+    composes: lg_grid-cols-[2fr_1fr] from global;
 }
 
 .checkoutContent_hidden {
     composes: checkoutContent;
 
-    composes: hidden from global;
+    @apply hidden;
 }
 
 .heading_container {
@@ -39,7 +37,7 @@
 .cartLink {
     composes: root from '../LinkButton/linkButton.module.css';
 
-    composes: text-inherit from global;
+    @apply text-inherit;
 }
 
 .stepper_heading {
@@ -60,10 +58,10 @@
 
 .payment_information_heading {
     composes: stepper_heading;
-    composes: border-b-0 from global;
+    @apply border-b-0;
 
     /* On mobile, order summary has a top border, so avoid doubling up. */
-    composes: lg_border-b from global;
+    @apply lg_border-b;
 }
 
 .signInContainer {
@@ -77,7 +75,7 @@
     composes: justify-items-center from global;
     composes: mb-xs from global;
     composes: p-xs from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: row-start-1 from global;
 
     composes: lg_grid-flow-col from global;
@@ -92,10 +90,10 @@
 .signInButton {
     composes: root_normalPriority from '../Button/button.module.css';
 
-    composes: min-h-auto from global;
-    composes: min-w-auto from global;
-    composes: px-md from global;
-    composes: py-1 from global;
+    @apply min-h-auto;
+    @apply min-w-auto;
+    @apply px-md;
+    @apply py-1;
 }
 
 .empty_cart_container {
@@ -133,7 +131,7 @@
     composes: lg_top-[6rem] from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .summaryContainer {
         grid-column: 2 / span 1;
         grid-row: 2 / span 3;

package/lib/components/CmsBlock/cmsBlock.module.css

@@ -2,18 +2,16 @@
     composes: m-xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .content h2 {
-    margin-bottom: 2rem;
-    text-align: center;
-    text-transform: uppercase;
+    @apply mb-8;
+    @apply text-center;
+    @apply uppercase;
 }
 
-/* TODO @TW: cannot compose */
 .content img {
-    display: block;
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-    width: auto;
+    @apply block;
+    @apply h-auto;
+    @apply w-auto;
+    @apply max-h-full;
+    @apply max-w-full;
 }

package/lib/components/ContactPage/contactPage.shimmer.module.css

@@ -20,7 +20,7 @@
     height: 500px;
 }
 
-@media only screen and (min-width: 769px) {
+@media screen(md) {
     .shimmerBanner {
         height: 300px;
     }

package/lib/components/CreateAccount/createAccount.module.css

@@ -12,11 +12,8 @@
     composes: p-xs from global;
     composes: rounded from global;
     composes: text-sm from global;
-}
 
-/* TODO @TW: cannot compose */
-.message:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .actions {

package/lib/components/CreateAccountPage/createAccountPage.module.css

@@ -17,5 +17,5 @@
     composes: lg_border-solid from global;
     composes: lg_border-subtle from global;
     composes: lg_pb-md from global;
-    composes: lg_rounded-md from global;
+    composes: lg_rounded-box from global;
 }

package/lib/components/Dialog/dialog.module.css

@@ -11,28 +11,22 @@
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-dialog from global;
+    composes: invisible from global;
     transform: translate3d(-50%, 0, 0);
     transition: opacity 192ms var(--venia-global-anim-out),
         visibility 192ms var(--venia-global-anim-out), left 0s 192ms;
 
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
-
     composes: lg_right-auto from global;
 }
 
 .root_open {
     composes: root;
 
-    composes: left-auto from global;
-    composes: opacity-100 from global;
-
-    composes: lg_left-1/2 from global;
+    @apply left-auto;
+    @apply opacity-100;
+    @apply visible;
 
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    @apply lg_left-1/2;
 
     /* It animates to being open. */
     transition: opacity 224ms var(--venia-global-anim-in),
@@ -116,7 +110,7 @@
 .headerText {
     composes: capitalize from global;
     composes: leading-tight from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: overflow-hidden from global;
     composes: text-subtle from global;
     composes: whitespace-nowrap from global;
@@ -173,7 +167,7 @@
  * dialogs slide out from the right.
  */
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .root {
         /* The Dialog starts off-screen on the right. */
         transform: translate3d(100%, 0, 0);

package/lib/components/ErrorView/errorView.module.css

@@ -37,7 +37,7 @@
 .actionsContainer {
 }
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .root {
         background-image: var(--mobileBackgroundImageUrl);
         /* two row grid because the "hangers" are on the top of the page */

package/lib/components/Field/field.module.css

@@ -27,7 +27,7 @@
     composes: inline-flex from global;
     composes: m-0 from global;
     composes: max-w-full from global;
-    composes: rounded-md from global;
+    composes: rounded-input from global;
     composes: text-colorDefault from global;
     composes: text-colorDefault from global;
     composes: w-full from global;
@@ -47,4 +47,5 @@
     composes: font-normal from global;
     composes: text-sm from global;
     composes: text-subtle from global;
+    composes: leading-none from global;
 }

package/lib/components/Field/fieldIcons.module.css

@@ -14,10 +14,13 @@
     grid-row: input-start / input-end;
 }
 
-/* TODO @TW: cannot compose */
 .input > input {
-    padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem);
-    padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+    padding-left: calc(
+        theme(spacing[7.5]) * var(--iconsBefore) + theme(spacing[2.5])
+    );
+    padding-right: calc(
+        theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])
+    );
 }
 
 .before,
@@ -30,12 +33,7 @@
     composes: pointer-events-none from global;
     composes: w-[2.5rem] from global;
     composes: z-foreground from global;
-}
-
-/* TODO @TW: cannot compose */
-.before:empty,
-.after:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .before {
@@ -46,8 +44,6 @@
     grid-area: after;
 }
 
-/* TODO @TW: cannot compose */
 .before svg {
-    /* composes: stroke-gray-600 from global; */
-    stroke: rgb(var(--venia-global-color-gray-600));
+    @apply stroke-gray-600;
 }

package/lib/components/Field/message.module.css

@@ -6,16 +6,12 @@
     composes: px-0.5 from global;
     composes: text-colorDefault from global;
     composes: text-sm from global;
-}
-
-/* TODO @TW: cannot compose */
-.root:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .root_error {
     composes: root;
 
-    composes: font-semibold from global;
-    composes: text-error from global;
+    @apply font-semibold;
+    @apply text-error;
 }

package/lib/components/FilterModal/CurrentFilters/currentFilter.module.css

@@ -14,8 +14,6 @@
     composes: text-white from global;
 }
 
-/* TODO @TW: cannot compose */
 .root svg {
-    /* composes: stroke-white from global; */
-    stroke: rgb(var(--venia-global-color-gray-50));
+    @apply stroke-white;
 }

package/lib/components/FilterModal/CurrentFilters/currentFilters.module.css

@@ -2,11 +2,8 @@
     composes: px-xs from global;
     composes: py-0 from global;
     composes: overflow-auto from global;
-}
 
-/* TODO @TW: cannot compose */
-.root:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .item {

package/lib/components/FilterModal/filterBlock.module.css

@@ -22,9 +22,5 @@
 }
 
 .list {
-}
-
-/* TODO @TW: cannot compose */
-.list:empty {
-    display: none;
+    composes: empty_hidden from global;
 }

package/lib/components/FilterModal/filterModal.module.css

@@ -11,15 +11,12 @@
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-dialog from global;
+    composes: invisible from global;
     grid-template-rows: 1fr 7rem;
     transform: translate3d(-100%, 0, 0);
     transition-duration: 192ms;
     transition-timing-function: var(--venia-global-anim-out);
     transition-property: opacity, transform, visibility;
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .root_open {
@@ -27,13 +24,10 @@
 
     composes: opacity-100 from global;
     composes: shadow-modal from global;
+    @apply visible;
     transform: translate3d(0, 0, 0);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .body {
@@ -64,12 +58,9 @@
     composes: px-xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .action button {
-    /* composes: text-sm from global; */
-    font-size: 0.875rem;
-    /* composes: no-underline from global; */
-    text-decoration: none;
+    @apply text-sm;
+    @apply no-underline;
 }
 
 .blocks {
@@ -78,10 +69,8 @@
     composes: px-xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .blocks > li:last-child {
-    /* composes: border-b-2 from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-bottom: 2px solid rgb(var(--venia-global-color-border));
+    @apply border-b-2;
+    @apply border-solid;
+    @apply border-subtle;
 }

package/lib/components/FilterModalOpenButton/filterModalOpenButton.module.css

@@ -1,7 +1,7 @@
 .filterButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: min-w-[6.25rem] from global;
+    @apply min-w-[6.25rem];
 
-    composes: lg_hidden from global;
+    @apply lg_hidden;
 }