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

package/lib/components/ToastContainer/toast.module.css

@@ -1,30 +1,26 @@
-@value info: rgb(0, 104, 108);
-@value warning: rgb(var(--venia-global-color-orange));
-@value error: rgb(220, 20, 60);
-@value success: rgb(var(--venia-global-color-green-500));
-
 .root {
-    align-items: start;
-    background-color: white;
-    border-radius: 2px;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-shaded-10 from global;
+    composes: border-solid from global;
+    composes: font-light from global;
+    composes: gap-x-2 from global;
+    composes: gap-y-3 from global;
+    composes: grid from global;
+    composes: items-start from global;
+    composes: justify-items-start from global;
+    composes: leading-tight from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: p-xs from global;
+    composes: rounded-sm from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+    composes: w-[20rem] from global;
+    animation: toast-pulsate 0.5s 1s;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-    color: rgb(33, 33, 33);
-    display: grid;
-    font-family: var(--venia-global-fontFamily-sansSerif);
-    font-size: 0.8rem;
-    font-weight: lighter;
-    gap: 0.5rem 0.75rem;
     grid-template-areas: 'icon message controls';
     grid-auto-columns: min-content auto min-content;
-    justify-items: start;
-    line-height: 1.25rem;
-    margin: 0 auto;
-    padding: 1rem;
-    width: 20rem;
-
-    border: 1px solid;
-    border-color: #d1d1d1;
-    animation: toast-pulsate 0.5s 1s;
 }
 
 @keyframes toast-pulsate {
@@ -45,51 +41,62 @@
 
 .infoToast {
     composes: root;
-    border-bottom: 4px solid info;
+
+    composes: border-b-4 from global;
+    composes: border-solid from global;
+    composes: border-info from global;
 }
 
 .infoToast > .icon {
-    --stroke: info;
+    --stroke: rgb(0, 104, 108);
 }
 
 .warningToast {
     composes: root;
-    border-bottom: 4px solid warning;
+
+    composes: border-b-4 from global;
+    composes: border-solid from global;
+    composes: border-warning from global;
 }
 
 .warningToast > .icon {
-    --stroke: warning;
+    --stroke: rgb(var(--venia-global-color-orange));
 }
 
 .errorToast {
     composes: root;
-    border-bottom: 4px solid error;
+
+    composes: border-b-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
 }
 
 .errorToast > .icon {
-    --stroke: error;
+    --stroke: rgb(220, 20, 60);
 }
 
 .successToast {
     composes: root;
-    border-bottom: 4px solid success;
+
+    composes: border-b-4 from global;
+    composes: border-solid from global;
+    composes: border-success from global;
 }
 
 .successToast > .icon {
-    --stroke: success;
+    --stroke: rgb(var(--venia-global-color-green-500));
 }
 
 .message {
+    composes: flex from global;
+    composes: text-sm from global;
     grid-area: message;
-    display: flex;
-    font-family: var(--venia-global-fontFamily-sansSerif);
-    font-size: 0.875rem;
 
     /* For wrapping...*/
     /* These are technically the same, but use both */
-    overflow-wrap: break-word;
-    word-wrap: break-word;
+    composes: break-words from global;
 
+    /* TODO @TW review */
     -ms-word-break: break-all;
     /* This is the dangerous one in WebKit, as it breaks things wherever */
     word-break: break-all;
@@ -106,17 +113,19 @@
 }
 
 .controls {
+    composes: border-l from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pl-3 from global;
     grid-area: controls;
-    border-left: 1px solid rgb(224, 224, 224);
-    padding-left: 0.75rem;
 }
 
 .actionButton {
-    font-weight: 600;
-    text-decoration: underline;
-    color: rgb(33, 33, 33);
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: underline from global;
 }
 
 .dismissButton {
-    color: rgb(112, 112, 112);
+    composes: text-subtle from global;
 }

package/lib/components/ToastContainer/toastContainer.module.css

@@ -1,24 +1,12 @@
 .root {
-    position: fixed;
-    display: grid;
-    grid-row-gap: 1rem;
-
-    /* Necessary to display over page contents */
-    z-index: 6;
-
-    /* Show toasts on bottom of screen */
-    bottom: 0px;
-    margin-bottom: 1rem;
-
-    /* Display in center */
-    min-width: 100%;
-}
-
-/* On desktop, display on right */
-@media (min-width: 1024px) {
-    .root {
-        composes: root;
-        right: 2rem;
-        min-width: auto;
-    }
+    composes: bottom-0 from global;
+    composes: fixed from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: mb-xs from global;
+    composes: min-w-full from global;
+    composes: z-toast from global;
+
+    composes: lg_min-w-auto from global;
+    composes: lg_right-md from global;
 }

package/lib/components/Wishlist/AddToListButton/addToListButton.module.css

@@ -1,16 +1,17 @@
 .root {
-    column-gap: 0.5rem;
-    display: inline-flex;
-    align-items: center;
+    composes: gap-x-2xs from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
     min-height: 3rem;
-    min-width: 3rem;
+    composes: min-w-[3rem] from global;
 }
 
 .root_selected {
     composes: root;
+
     --selectedColor: rgb(var(--venia-global-color-red-400));
     --fill: var(--selectedColor);
     --stroke: var(--selectedColor);
 
-    text-decoration: none;
+    composes: no-underline from global;
 }

package/lib/components/Wishlist/WishlistDialog/CreateWishlistForm/createWishlistForm.module.css

@@ -5,8 +5,8 @@
 }
 
 .actions {
-    padding-top: 2rem;
-    display: grid;
-    grid-gap: 0.5rem;
-    grid-auto-flow: column;
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: pt-md from global;
 }

package/lib/components/Wishlist/WishlistDialog/WishlistLineItem/wishlistLineItem.module.css

@@ -1,10 +1,11 @@
 .root {
-    width: 100%;
-    text-align: left;
-
-    border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark));
-    font-weight: var(--venia-global-fontWeight-semibold);
-    height: 3.5rem;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: h-[3.5rem] from global;
+    composes: text-left from global;
+    composes: w-full from global;
 }
 
 .lineItemName {

package/lib/components/Wishlist/WishlistDialog/wishlistDialog.module.css

@@ -2,11 +2,16 @@
 }
 
 .formErrors {
-    border-color: rgb(var(--venia-global-color-error));
-    border-style: solid;
-    border-width: 0 0 0 5px;
-    padding: 1rem 0 1rem 1rem;
-    display: grid;
+    composes: border-error from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b-0 from global;
+    composes: border-l-4 from global;
+    composes: grid from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
     grid-column: 1 / span 1;
 }
 
@@ -14,8 +19,8 @@
 }
 
 .createListButton {
-    width: 100%;
-    text-align: left;
-    height: 3.5rem;
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
+    composes: h-[3.5rem] from global;
+    composes: text-left from global;
+    composes: w-full from global;
 }

package/lib/components/WishlistPage/actionMenu.js

@@ -1,6 +1,6 @@
 /**
- * Action Menu for wishlist is an EE-only feature.
- * Here in CE, don't render the Action Menu at all.
+ * Action Menu for wishlist is an AC-only feature.
+ * Here in MOS, don't render the Action Menu at all.
  */
 export default () => {
     return null;

package/lib/components/WishlistPage/createWishlist.module.css

@@ -2,58 +2,63 @@
 }
 
 .body {
-    overflow: auto;
+    composes: overflow-auto from global;
 }
 
 .buttons {
-    padding: 1rem 1rem 2.5rem;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 1rem;
-    justify-content: center;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: pb-md from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
 }
 
 .cancelButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    min-width: 9rem;
+    composes: min-w-[9rem] from global;
 }
 
 .confirmButton {
     composes: root_highPriority from '../Button/button.module.css';
 
-    min-width: 9rem;
+    composes: min-w-[9rem] from global;
 }
 
 .contents {
-    padding: 1rem;
-    height: fit-content;
+    composes: h-fitContent from global;
+    composes: p-xs from global;
 }
 
 .createButton {
-    width: 100%;
+    composes: w-full from global;
 }
 
 .form {
-    display: grid;
-    gap: 2rem;
-    padding: 0.5rem 1rem;
-    margin: auto;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: m-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
 }
 
 .icon {
-    stroke: rgb(var(--venia-brand-color-1-600));
+    composes: stroke-brand-base from global;
 }
 
 .labelContainer {
-    align-items: center;
-    border: 2px dashed rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    color: rgb(var(--venia-brand-color-1-600));
-    column-gap: 0.5rem;
-    display: grid;
-    font-weight: var(--venia-global-fontWeight-semibold);
-    grid-auto-flow: column;
-    height: 6rem;
-    justify-content: center;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: h-[6rem] from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
 }

package/lib/components/WishlistPage/wishlist.module.css

@@ -1,79 +1,84 @@
 .root {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    display: grid;
-    padding: 2rem;
-    row-gap: 2rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: p-sm from global;
+    composes: rounded-md from global;
+
+    composes: md_p-md from global;
 }
 
 .header {
-    align-items: center;
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: space-between;
+    composes: gap-y-0 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+
+    composes: md_gap-y-2xs from global;
+}
+
+@media (max-width: 799px) {
+    .header {
+        grid-template-rows: 1fr 1fr;
+    }
 }
 
 .nameContainer {
-    align-items: center;
-    gap: 0.5rem 1rem;
-    display: grid;
-    grid-auto-flow: column;
+    composes: gap-x-2xs from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: items-center from global;
+
+    composes: md_grid-flow-col from global;
 }
 
 .emptyListText {
-    text-align: center;
-    padding: 2rem 0;
+    composes: py-md from global;
+    composes: text-center from global;
 }
 
 .name {
-    font-weight: var(--venia-global-fontWeight-semibold);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    composes: font-semibold from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+    composes: text-ellipsis from global;
 }
 
 .buttonsContainer {
-    align-items: center;
-    column-gap: 1rem;
-    display: grid;
-    grid-auto-flow: column;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-self-end from global;
+
+    composes: md_justify-self-start from global;
 }
 
 .content_hidden {
-    display: none;
+    composes: hidden from global;
 }
 
 .visibilityToggle_hidden {
-    display: none;
+    composes: hidden from global;
 }
 
 .loadMore {
     composes: root_lowPriority from '../Button/button.module.css';
-    margin: 2rem auto;
-    display: block;
-    min-width: 20rem;
-}
 
-@media (max-width: 768px) {
-    .root {
-        padding: 1.5rem;
-    }
-
-    .header {
-        grid-template-rows: 1fr 1fr;
-        row-gap: 0.5rem;
-    }
+    composes: block from global;
+    composes: min-w-[20rem] from global;
+    composes: mx-auto from global;
+    composes: my-md from global;
+}
 
-    .nameContainer {
-        grid-auto-flow: row;
-    }
+.itemsCountContainer {
+    composes: col-end-span2 from global;
+    composes: justify-self-center from global;
 
-    .buttonsContainer {
-        justify-self: end;
-    }
-
-    .itemsCountContainer {
-        grid-column-end: span 2;
-        justify-self: center;
-    }
+    composes: md_col-end-auto from global;
+    composes: md_justify-self-start from global;
 }

package/lib/components/WishlistPage/wishlistConfirmRemoveProductDialog.module.css

@@ -1,5 +1,5 @@
 .root {
-    padding: 1rem;
+    composes: p-xs from global;
 }
 
 .confirmButton {
@@ -8,13 +8,13 @@
 }
 
 .errorMessage {
-    color: rgb(var(--venia-global-color-error));
-    font-size: var(--venia-typography-body-S-fontSize);
-    font-weight: var(--venia-global-fontWeight-semibold);
-    line-height: var(--venia-global-lineHeight-300);
-    padding-bottom: 1rem;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: pb-xs from global;
+    composes: text-error from global;
+    composes: text-sm from global;
 }
 
 .prompt {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }

package/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css

@@ -1,11 +1,11 @@
 .root {
-    padding: 1rem;
+    composes: p-xs from global;
 }
 
 .cancelButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    min-width: 9rem;
+    composes: min-w-[9rem] from global;
 }
 
 .confirmButton {
@@ -17,6 +17,6 @@
 }
 
 .form {
-    display: grid;
-    gap: 1.5rem;
+    composes: gap-sm from global;
+    composes: grid from global;
 }

package/lib/components/WishlistPage/wishlistItem.module.css

@@ -1,22 +1,23 @@
 .root {
-    align-content: start;
-    display: grid;
-    row-gap: 0.5rem;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: gap-y-2xs from global;
 }
 
 .root_disabled {
     composes: root;
-    opacity: 0.5;
+
+    composes: opacity-50 from global;
 }
 
 .name {
-    font-size: var(--venia-typography-detail-XL-fontSize);
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
 }
 
 .detail {
-    color: rgb(var(--venia-global-color-text-alt));
-    font-size: var(--venia-typography-detail-L-fontSize);
+    composes: text-sm from global;
+    composes: text-subtle from global;
 }
 
 .option {
@@ -24,56 +25,54 @@
 }
 
 .outOfStock {
-    color: rgb(var(--venia-global-color-error));
-    font-size: var(--venia-typography-detail-L-fontSize);
+    composes: text-sm from global;
+    composes: text-error from global;
 }
 
 .priceContainer {
-    font-size: var(--venia-typography-detail-XL-fontSize);
+    composes: text-colorDefault from global;
 }
 
 .image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: w-full from global;
 }
 
 .image_disabled {
     composes: image;
-    opacity: 0.6;
+    composes: opacity-50 from global;
 }
 
 .addToCart {
     composes: root_highPriority from '../Button/button.module.css';
-    justify-self: left;
-    margin-top: 0.25rem;
+
+    composes: justify-self-start from global;
+    composes: min-w-full from global;
+    composes: mt-1 from global;
+
+    composes: xs_min-w-auto from global;
 }
 
 .deleteItem {
-    margin: 0 0.5rem 0 1rem;
-    justify-self: right;
+    composes: mt-0 from global;
+    composes: mr-2 from global;
+    composes: mb-0 from global;
+    composes: ml-xs from global;
+    composes: justify-self-end from global;
 }
 
 .actionWrap {
-    display: flex;
-    align-items: flex-start;
+    composes: flex from global;
+    composes: items-start from global;
 }
 
 .moreActions {
-    align-items: center;
-    background-color: rgb(var(--venia-global-color-gray-100));
-    border-radius: 50%;
-    /**
-        Hide actions menu until PWA-1683
-
-        display: inline-flex;
-     */
-    display: none;
-    padding: 0.125rem;
-}
-
-@media (max-width: 480px) {
-    .addToCart {
-        min-width: 100%;
-    }
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    /* Hide actions menu until PWA-1683 */
+    /* composes: inline-flex from global; */
+    composes: items-center from global;
+    composes: p-0.5 from global;
+    composes: rounded-full from global;
 }