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

package/lib/components/FilterSidebar/filterSidebar.module.css

@@ -35,12 +35,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 {
@@ -49,10 +46,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/Footer/footer.module.css

@@ -99,13 +99,13 @@
     composes: lg_text-left from global;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .branding {
         grid-template-areas: 'c' 'b' 'a';
     }
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .branding {
         grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
     }

package/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.module.css

@@ -16,11 +16,11 @@
 .cancelButton {
     composes: root_lowPriority from '../../Button/button.module.css';
 
-    composes: min-w-[9rem] from global;
+    @apply min-w-[9rem];
 }
 
 .submitButton {
     composes: root_highPriority from '../../Button/button.module.css';
 
-    composes: min-w-[9rem] from global;
+    @apply min-w-[9rem];
 }

package/lib/components/ForgotPasswordPage/forgotPasswordPage.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/Gallery/addToCartButton.module.css

@@ -1,15 +1,13 @@
 .root {
     composes: root_highPriority from '../Button/button.module.css';
 
-    composes: min-w-[6.125rem] from global;
+    @apply min-w-[6.125rem];
     composes: -ml-2xs from global;
-    composes: px-2xs from global;
-    composes: py-0 from global;
+    @apply py-0;
     composes: self-center from global;
     min-height: 2rem;
 
-    composes: sm_min-w-[8rem] from global;
-    /* composes: md_min-w-0 from global; */
+    @apply sm_min-w-[8rem];
 }
 
 .icon {

package/lib/components/Gallery/gallery.module.css

@@ -15,7 +15,7 @@
     grid-template-columns: repeat(3, 1fr);
 }
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .items {
         grid-template-columns: repeat(2, 1fr);
     }

package/lib/components/Gallery/item.module.css

@@ -45,11 +45,8 @@
     composes: grid from global;
     composes: pl-2xs from global;
     grid-template-columns: auto auto;
-}
 
-/* TODO @TW: cannot compose */
-.actionsContainer:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .name {

package/lib/components/Header/currencySwitcher.module.css

@@ -35,14 +35,13 @@
     composes: shadow-menu from global;
     composes: top-auto from global;
     composes: z-menu from global;
+    composes: invisible from global;
     transform: translate3d(0, 8px, 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;
+    @apply invisible;
 
     composes: sm_bottom-auto from global;
     composes: sm_left-auto from global;
@@ -50,7 +49,7 @@
     composes: sm_top-md from global;
 }
 
-@media (min-width: 640px) {
+@media screen(sm) {
     .menu {
         transform: translate3d(0, -8px, 0);
     }
@@ -59,15 +58,12 @@
 .menu_open {
     composes: menu;
 
-    composes: opacity-100 from global;
+    @apply opacity-100;
     composes: p-0 from global;
+    @apply visible;
     transform: translate3d(0, 4px, 0);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .menuItem {
@@ -84,35 +80,28 @@
     composes: mr-2xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .root:last-child:not(:only-child) {
-    padding-left: 0;
-    grid-auto-flow: column;
-}
-
-/* TODO @TW: cannot compose */
-.root:last-child:not(:only-child)::before {
-    /* composes: border from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-left: 1px solid rgb(var(--venia-global-color-border));
-    content: '';
-    height: 1em;
-    width: 1rem;
+    @apply pl-0;
+    @apply grid-flow-col;
+
+    @apply before_border-l;
+    @apply before_border-solid;
+    @apply before_border-base;
+    @apply before_h-4;
+    @apply before_w-4;
 }
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .root:only-child {
         grid-column: 2;
     }
 
-    /* TODO @TW: cannot compose */
     .root:last-child .menu {
-        right: 1rem;
-        left: auto;
+        @apply right-4;
+        @apply left-auto;
     }
 
     .menu_open {
-        transform: translate3d(0, -4px, 0);
+        @apply -translate-y-1;
     }
 }

package/lib/components/Header/header.module.css

@@ -115,7 +115,7 @@
 .input {
     composes: input from '../TextInput/textInput.module.css';
 
-    composes: max-w-sm from global;
+    @apply max-w-sm;
 }
 
 .loader,
@@ -145,9 +145,9 @@
 
 .loaderBefore,
 .loaderAfter {
+    composes: content-empty from global;
     composes: absolute from global;
     composes: top-0 from global;
-    content: '';
 }
 
 .loaderBefore {

package/lib/components/Header/onlineIndicator.module.css

@@ -11,13 +11,13 @@
     composes: ml-6 from global;
 }
 
-@media (min-width: 640px) {
+@media screen(sm) {
     .root {
         grid-column: 3 / 4;
     }
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .root {
         grid-column: 2 / 3;
     }

package/lib/components/Header/storeSwitcher.module.css

@@ -14,7 +14,7 @@
 
 .trigger {
     composes: max-w-[15rem] from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: overflow-hidden from global;
     composes: whitespace-nowrap from global;
 
@@ -39,15 +39,12 @@
     composes: top-auto from global;
     composes: w-max from global;
     composes: z-menu from global;
+    composes: invisible from global;
     transform: translate3d(0, -8px, 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;
-
     composes: sm_bottom-auto from global;
     composes: sm_left-auto from global;
     composes: sm_right-xs from global;
@@ -57,14 +54,11 @@
 .menu_open {
     composes: menu;
 
-    composes: opacity-100 from global;
+    @apply opacity-100;
+    @apply visible;
     transform: translate3d(0, 4px, 0);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .menuItem {
@@ -90,22 +84,21 @@
  * Mobile-specific styles.
  */
 
-@media (max-width: 639px) {
+@media screen(-sm) {
     .root:only-child {
         grid-column: 2;
     }
 
-    /* TODO @TW: cannot compose */
     .root:last-child .menu {
-        right: 1rem;
-        left: auto;
+        @apply right-4;
+        @apply left-auto;
     }
 
     .menu {
-        transform: translate3d(0, 8px, 0);
+        @apply translate-y-2;
     }
 
     .menu_open {
-        transform: translate3d(0, -4px, 0);
+        @apply -translate-y-1;
     }
 }

package/lib/components/HomePage/homePage.module.css

@@ -60,7 +60,7 @@
     z-index: 1;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-slider ~ div) {
         grid-auto-flow: row;
         grid-template-columns: 100%;
@@ -121,7 +121,7 @@
     padding: 0 0 6rem !important;
 }
 
-@media (max-width: 1280px) {
+@media screen(-2xl) {
     :global(.venia-home-slider .slick-slider) {
         min-height: 548px !important;
     }
@@ -131,7 +131,7 @@
     }
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-slider .slick-slide > div > div > div) {
         align-content: end;
         background-position: right center !important;
@@ -230,7 +230,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-callout) {
         justify-self: center;
         max-width: 640px;
@@ -254,7 +254,7 @@
     width: 16rem;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-callout-text) {
         transform: translate3d(0, 0.5rem, 0);
     }
@@ -288,7 +288,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-banner-a-content) {
         grid-column: 1 / span 1;
         padding-top: 0 !important;
@@ -324,7 +324,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-banner-a-image) {
         background-position: center bottom !important;
         grid-column: 1 / span 1;
@@ -344,7 +344,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-banner-b-image) {
         grid-column: 1 / span 1;
     }
@@ -357,7 +357,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(.venia-home-banner-b-content) {
         grid-column: 1 / span 1;
         margin: 0 1rem !important;
@@ -425,7 +425,7 @@
     justify-content: normal !important;
 }
 
-@media (max-width: 960px) {
+@media screen(-lg) {
     :global(.venia-home-banner-text > div) {
         flex-direction: column !important;
         justify-content: center !important;

package/lib/components/Image/image.module.css

@@ -20,18 +20,13 @@
     composes: absolute from global;
     composes: left-0 from global;
     composes: top-0 from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    composes: visible from global;
 }
 
 .notLoaded {
     composes: loaded;
 
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
+    @apply invisible;
 }
 
 .placeholder {

package/lib/components/LegacyMiniCart/cartOptions.module.css

@@ -21,7 +21,7 @@
 
 .name {
     composes: overflow-hidden from global;
-    composes: overflow-ellipsis from global;
+    composes: text-ellipsis from global;
     composes: whitespace-nowrap from global;
 }
 

package/lib/components/LegacyMiniCart/mask.module.css

@@ -1,5 +1,5 @@
 .root_active {
     composes: root_active from '../Mask/mask.module.css';
 
-    composes: opacity-25 from global;
+    @apply opacity-25;
 }

package/lib/components/LegacyMiniCart/miniCart.module.css

@@ -14,16 +14,13 @@
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-menu from global;
+    composes: invisible from global;
     box-shadow: -1px 0 rgb(var(--venia-global-color-border));
     grid-template-rows: min-content 1fr;
     transform: translate3d(100%, 0, 0);
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 /* state: open */
@@ -32,11 +29,8 @@
     composes: root;
 
     composes: opacity-100 from global;
+    @apply visible;
     transform: translate3d(0, 0, 0);
     transition-duration: 224ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }

package/lib/components/LinkButton/linkButton.module.css

@@ -2,9 +2,8 @@
     composes: root from '../clickable.module.css';
 
     composes: font-semibold from global;
-    composes: leading-tight from global;
+    @apply leading-tight;
     composes: max-w-full from global;
-    composes: text-colorDefault from global;
     composes: text-brand-dark from global;
     composes: underline from global;
 

package/lib/components/LoadingIndicator/indicator.module.css

@@ -14,10 +14,10 @@
 .global {
     composes: root;
 
-    composes: fixed from global;
-    composes: h-full from global;
+    @apply fixed;
+    @apply h-full;
     composes: left-0 from global;
-    composes: m-0 from global;
+    @apply m-0;
     composes: top-0 from global;
     composes: w-full from global;
 }

package/lib/components/Main/main.module.css

@@ -20,19 +20,19 @@
     composes: page;
 }
 
-@media (min-height: 640px) {
+@media screen(hsm) {
     .page {
         min-height: 48rem;
     }
 }
 
-@media (min-height: 768px) {
+@media screen(hmd) {
     .page {
         min-height: 60rem;
     }
 }
 
-@media (min-height: 960px) {
+@media screen(hlg) {
     .page {
         min-height: 72rem;
     }

package/lib/components/Mask/mask.module.css

@@ -10,22 +10,16 @@
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-mask from global;
+    composes: invisible from global;
     transition-duration: 192ms;
     transition-property: opacity, visibility;
     transition-timing-function: linear;
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .root_active {
     composes: root;
 
-    composes: opacity-50 from global;
+    @apply opacity-50;
+    @apply visible;
     transition-duration: 224ms;
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }

package/lib/components/MegaMenu/megaMenuItem.module.css

@@ -24,8 +24,7 @@
     composes: pl-2xs from global;
 }
 
-/* TODO @TW: cannot compose */
 .megaMenuItem:hover .megaMenuLink,
 .megaMenuItem:focus .megaMenuLink {
-    text-decoration: underline;
+    @apply underline;
 }

package/lib/components/MegaMenu/submenu.module.css

@@ -9,18 +9,18 @@
     composes: right-0 from global;
     top: 80px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
+
+    composes: before_content-empty from global;
+    composes: before_h-2.5 from global;
+    composes: before_left-0 from global;
+    composes: before_pointer-events-none from global;
+    composes: before_absolute from global;
+    composes: before_right-0 from global;
+    composes: before_top-0 from global;
 }
 
-/* TODO @TW: cannot compose */
 .submenu::before {
     box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
-    content: '';
-    height: 10px;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
 }
 
 .submenu_inactive {

package/lib/components/MiniCart/ProductList/item.module.css

@@ -15,7 +15,7 @@
 .root_disabled {
     composes: root;
 
-    composes: opacity-50 from global;
+    @apply opacity-50;
 }
 
 .thumbnailContainer {

package/lib/components/MiniCart/miniCart.js

@@ -53,7 +53,7 @@ const MiniCart = React.forwardRef((props, ref) => {
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
-    const rootClass = isOpen ? classes.root_open : classes.root;
+    const rootClass = isOpen ? classes.root_open : classes.root_closed;
     const contentsClass = isOpen ? classes.contents_open : classes.contents;
     const quantityClassName = loading
         ? classes.quantity_loading
@@ -192,6 +192,7 @@ export default MiniCart;
 MiniCart.propTypes = {
     classes: shape({
         root: string,
+        root_closed: string,
         root_open: string,
         contents: string,
         contents_open: string,