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

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

@@ -1,8 +1,8 @@
 .root {
     composes: auto-cols-fr from global;
-    composes: bg-white from global;
+    composes: bg-header from global;
     composes: border-b from global;
-    composes: border-neutral-l1 from global;
+    composes: border-subtle from global;
     composes: grid from global;
     composes: h-auto from global;
     composes: justify-center from global;
@@ -10,11 +10,8 @@
     composes: top-0 from global;
     composes: sticky from global;
     composes: w-full from global;
-    composes: z-10 from global;
-}
+    composes: z-header from global;
 
-/* Large screen styles */
-.root {
     composes: lg_px-8 from global;
 }
 
@@ -23,11 +20,11 @@
     composes: grid from global;
     composes: grid-flow-col from global;
     composes: justify-end from global;
-    composes: max-w-desktop from global;
+    composes: max-w-site from global;
     composes: mx-auto from global;
     composes: relative from global;
     composes: w-full from global;
-    composes: z-11 from global;
+    composes: z-menu from global;
 }
 
 .switchersContainer {
@@ -60,18 +57,13 @@
     composes: h-14 from global;
     composes: items-center from global;
     composes: justify-self-center from global;
-    composes: max-w-desktop from global;
-    composes: min-height-header from global;
+    composes: max-w-site from global;
     composes: w-full from global;
-    composes: z-3 from global;
-}
+    composes: z-header from global;
 
-/* Large screen styles */
-.toolbar {
     composes: lg_h-20 from global;
     composes: lg_gap-x-8 from global;
     composes: lg_grid-cols-12 from global;
-    composes: lg_min-height-header from global;
 }
 
 .logo {
@@ -91,10 +83,7 @@
 .logoContainer {
     composes: col-start-2 from global;
     composes: justify-self-center from global;
-}
 
-/* Large screen styles */
-.logoContainer {
     composes: lg_col-end-3 from global;
     composes: lg_col-start-1 from global;
     composes: lg_justify-self-start from global;
@@ -110,10 +99,7 @@
     composes: justify-items-end from global;
     composes: justify-self-end from global;
     composes: w-max from global;
-}
 
-/* Large screen styles */
-.secondaryActions {
     composes: lg_col-end-13 from global;
     composes: lg_col-start-10 from global;
     composes: lg_gap-x-4 from global;
@@ -128,16 +114,18 @@
 
 .input {
     composes: input from '../TextInput/textInput.module.css';
+
     composes: max-w-sm from global;
 }
 
 .loader,
-.loader:before,
-.loader:after {
+.loaderBefore,
+.loaderAfter {
     --dot-size: 2em;
     --dot-font-size: 6px;
     --dot-shadow-offset: calc(-1 * var(--dot-size) + var(--dot-font-size));
-    border-radius: 50%;
+
+    composes: rounded-full from global;
     width: var(--dot-size);
     height: var(--dot-size);
     animation: pulse 1.8s infinite ease-in-out;
@@ -145,30 +133,32 @@
 }
 
 .loader {
+    composes: mb-0 from global;
+    composes: mx-auto from global;
     composes: relative from global;
-    color: rgb(var(--venia-global-color-gray-dark));
+    composes: text-subtle from global;
     font-size: var(--dot-font-size);
-    margin: var(--dot-shadow-offset) auto 0;
+    margin-top: var(--dot-shadow-offset);
     transform: translateZ(0);
     animation-delay: -0.16s;
 }
 
-.loader:before,
-.loader:after {
+.loaderBefore,
+.loaderAfter {
+    composes: absolute from global;
+    composes: top-0 from global;
     content: '';
-    position: absolute;
-    top: 0;
 }
 
-.loader:before {
-    color: rgb(var(--venia-global-color-gray));
-    left: -3.5em;
+.loaderBefore {
+    composes: left-[-3.5em] from global;
+    composes: text-gray-100 from global;
     animation-delay: -0.32s;
 }
 
-.loader:after {
-    color: rgb(var(--venia-global-color-gray-darker));
-    left: 3.5em;
+.loaderAfter {
+    composes: left-[3.5em] from global;
+    composes: text-gray-600 from global;
 }
 
 @keyframes pulse {

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

@@ -1,11 +1,8 @@
 .root {
     composes: root from '../clickable.module.css';
-    height: 3rem;
-    width: 3rem;
-}
 
-@media (min-width: 1024px) {
-    .root {
-        display: none;
-    }
+    composes: h-[3rem] from global;
+    composes: w-[3rem] from global;
+
+    composes: lg_hidden from global;
 }

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

@@ -1,22 +1,24 @@
 .root {
     --stroke: rgb(var(--venia-global-color-text));
-    align-items: center;
-    display: flex;
+
+    composes: flex from global;
+    composes: h-[3rem] from global;
+    composes: items-center from global;
+    composes: ml-18 from global;
+    composes: w-[3rem] from global;
     grid-area: primary;
-    height: 3rem;
-    margin-left: 4.5rem;
-    width: 3rem;
+
+    composes: sm_justify-self-start from global;
+    composes: sm_ml-10 from global;
 }
 
-@media (min-width: 641px) {
+@media (min-width: 640px) {
     .root {
-        justify-self: start;
-        margin-left: 2.5rem;
         grid-column: 3 / 4;
     }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 960px) {
     .root {
         grid-column: 2 / 3;
     }

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

@@ -1,23 +1,18 @@
 .root {
     composes: root from '../clickable.module.css';
+
+    composes: h-lg from global;
+    composes: w-lg from global;
     transition-property: color;
     transition-duration: 224ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    height: 3rem;
-    width: 3rem;
-}
 
-.label {
-    display: none;
+    composes: sm_w-auto from global;
 }
 
-@media (min-width: 641px) {
-    .root {
-        width: auto;
-    }
+.label {
+    composes: hidden from global;
 
-    .label {
-        display: initial;
-        margin-inline-start: 0.25rem;
-    }
+    composes: sm_inline from global;
+    composes: sm_ml-1 from global;
 }

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

@@ -1,101 +1,110 @@
 .root {
-    align-items: center;
-    display: grid;
-    justify-items: end;
-    margin: 0 auto;
-    max-width: var(--venia-global-maxWidth);
-    padding: 0.5rem 1rem;
-    position: relative;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: relative from global;
+
+    composes: sm_justify-items-end from global;
 }
 
 .trigger {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    composes: max-w-[15rem] from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+
+    composes: sm_max-w-full from global;
 }
 
 .menu {
-    background-color: rgb(var(--venia-global-color-gray-50));
-    border: 1px solid rgb(var(--venia-global-color-gray-dark));
-    border-radius: 0.25rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    max-width: 90vw;
-    opacity: 0;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    position: absolute;
-    right: 1rem;
-    top: 2.5rem;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: bottom-md from global;
+    composes: left-xs from global;
+    composes: max-w-[90vw] from global;
+    composes: opacity-0 from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto from global;
+    composes: w-max from global;
+    composes: z-menu 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;
-    width: max-content;
-    z-index: 2;
+
+    composes: sm_bottom-auto from global;
+    composes: sm_left-auto from global;
+    composes: sm_right-xs from global;
+    composes: sm_top-md from global;
 }
 
 .menu_open {
     composes: menu;
 
-    opacity: 1;
+    composes: opacity-100 from global;
     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 {
-}
-
-.menuItem:hover {
-    background-color: rgb(var(--venia-global-color-gray));
+    composes: hover_bg-subtle from global;
 }
 
 .groups {
-    max-height: 24rem;
-    overflow: auto;
+    composes: max-h-[24rem] from global;
+    composes: overflow-auto from global;
 }
 
 .groupList {
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
-}
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
 
-.groupList:not(:last-child) {
-    border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark));
+    composes: last_border-none from global;
 }
 
 /*
  * Mobile-specific styles.
  */
 
-@media (max-width: 640px) {
-    .root {
-        justify-items: start;
-    }
-
-    .trigger {
-        max-width: 15rem;
-    }
-
-    .menu {
-        bottom: 2.5rem;
-        left: 1rem;
-        right: auto;
-        top: auto;
-        transform: translate3d(0, 8px, 0);
-    }
-
+@media (max-width: 639px) {
     .root:only-child {
         grid-column: 2;
     }
 
+    /* TODO @TW: cannot compose */
     .root:last-child .menu {
         right: 1rem;
         left: auto;
     }
 
+    .menu {
+        transform: translate3d(0, 8px, 0);
+    }
+
     .menu_open {
         transform: translate3d(0, -4px, 0);
     }

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

@@ -1,19 +1,20 @@
 .root {
-    align-items: center;
-    display: flex;
-    width: 100%;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
 }
 
 .content {
-    align-items: center;
-    display: grid;
-    gap: 0.75rem;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-    padding: 0.5rem 1rem;
-    width: 100%;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: w-full from global;
 }
 
 .text {
-    text-align: left;
+    composes: text-left from global;
 }

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

@@ -60,7 +60,7 @@
     z-index: 1;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-slider ~ div) {
         grid-auto-flow: row;
         grid-template-columns: 100%;
@@ -81,6 +81,7 @@
  */
 :global(.venia-home-slider .slick-slider) {
     min-height: 628px !important;
+    margin-left: -1rem;
     max-width: 1440px;
     width: 100vw;
 }
@@ -130,7 +131,7 @@
     }
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-slider .slick-slide > div > div > div) {
         align-content: end;
         background-position: right center !important;
@@ -229,7 +230,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-callout) {
         justify-self: center;
         max-width: 640px;
@@ -253,7 +254,7 @@
     width: 16rem;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-callout-text) {
         transform: translate3d(0, 0.5rem, 0);
     }
@@ -287,7 +288,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-banner-a-content) {
         grid-column: 1 / span 1;
         padding-top: 0 !important;
@@ -323,7 +324,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-banner-a-image) {
         background-position: center bottom !important;
         grid-column: 1 / span 1;
@@ -343,7 +344,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-banner-b-image) {
         grid-column: 1 / span 1;
     }
@@ -356,7 +357,7 @@
     width: 100% !important;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     :global(.venia-home-banner-b-content) {
         grid-column: 1 / span 1;
         margin: 0 1rem !important;

package/lib/components/Icon/icon.module.css

@@ -1,7 +1,7 @@
 .root {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
     touch-action: manipulation;
 }
 
@@ -10,9 +10,10 @@
     stroke: var(--stroke, rgb(var(--venia-global-color-text)));
 }
 
-@media (min-width: 641px) {
-    .icon_desktop {
-        width: 28px;
-        height: 28px;
-    }
+.icon_desktop {
+    composes: h-auto from global;
+    composes: w-auto from global;
+
+    composes: sm_h-[28px] from global;
+    composes: sm_w-[28px] from global;
 }

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

@@ -1,9 +1,9 @@
 .root {
-    background-color: rgb(var(--venia-global-color-gray));
-    border-radius: 2px;
-    width: 100%;
+    composes: bg-subtle from global;
+    composes: rounded-sm from global;
+    composes: w-full from global;
 }
 
 .container {
-    width: 400px;
+    composes: w-[400px] from global;
 }

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

@@ -6,7 +6,7 @@
 }
 
 .container {
-    position: relative;
+    composes: relative from global;
 }
 
 .image {
@@ -17,25 +17,32 @@
 }
 
 .loaded {
-    position: absolute;
-    top: 0;
-    left: 0;
+    composes: absolute from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }
 
 .notLoaded {
     composes: loaded;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
 }
 
 .placeholder {
-    background-color: rgb(var(--venia-global-color-gray));
-    position: relative;
-    top: 0;
-    left: 0;
+    composes: bg-transparent from global;
+    composes: left-0 from global;
+    composes: relative from global;
+    composes: top-0 from global;
 }
 
 .placeholder_layoutOnly {
     composes: placeholder;
-    background-color: unset;
+
+    composes: bg-transparent from global;
 }

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

@@ -1,5 +1,5 @@
 .root {
-    display: grid;
+    composes: grid from global;
     grid-template-rows: min-content 1fr;
-    overflow: auto;
+    composes: overflow-auto from global;
 }

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

@@ -1,43 +1,49 @@
 .root {
-    display: grid;
+    composes: absolute from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: top-lg from global;
+    composes: w-full from global;
     grid-template-rows: min-content 1fr;
-    height: calc(100% - var(--legacy-minicart-header-height));
-    left: 0;
-    position: absolute;
-    top: 3.5rem;
-    width: 100%;
+    height: calc(
+        100% - var(--legacy-minicart-header-height)
+    ); /* TODO @TW: review */
 }
 
 .focusItem {
-    box-shadow: 0 1px rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 2rem;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-    padding: 1rem;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+    composes: p-xs from global;
+    composes: shadow-thin from global;
 }
 
 .name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    composes: overflow-hidden from global;
+    composes: overflow-ellipsis from global;
+    composes: whitespace-nowrap from global;
 }
 
 .form {
-    overflow: auto;
+    composes: overflow-auto from global;
 }
 
 .options {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .quantity {
-    border-color: rgb(var(--venia-global-color-border));
-    border-style: solid;
-    border-width: 0 0 1px;
-    margin: 0 1.5rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b from global;
+    composes: border-l-0 from global;
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: pt-xs from global;
+    composes: pb-xs from global;
 }
 
 .quantityTitle {