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

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

@@ -1,28 +1,37 @@
+/* The root aside element takes up the whole screen. */
+/* It is hidden by default. */
+/* It animates to being closed, and then moves off screen. */
+/* It sits over all background content. */
 .root {
-    /* The root aside element takes up the whole screen. */
-    position: fixed;
-    left: -100vw;
-    top: 0;
-    height: 100%;
-    width: 100%;
-
-    /* It is hidden by default. */
-    opacity: 0;
-    visibility: hidden;
-
+    composes: fixed from global;
+    composes: h-full from global;
+    composes: left-[-100vw] from global;
+    composes: opacity-0 from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
     transform: translate3d(-50%, 0, 0);
-    /* It animates to being closed, and then moves off screen. */
     transition: opacity 192ms var(--venia-global-anim-out),
         visibility 192ms var(--venia-global-anim-out), left 0s 192ms;
 
-    /* It sits over all background content. */
-    z-index: 3;
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: lg_right-auto from global;
 }
 
 .root_open {
     composes: root;
-    left: 50%;
-    opacity: 1;
+
+    composes: left-auto from global;
+    composes: opacity-100 from global;
+
+    composes: lg_left-1/2 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 
     /* It animates to being open. */
@@ -30,55 +39,57 @@
         visibility 224ms var(--venia-global-anim-in), left 0s;
 }
 
+/* The form fills the entire aside. */
+/* Its contents are centered horizontally and vertically. */
 .form {
-    /* The form fills the entire aside. */
-    height: 100%;
-    width: 100%;
-
-    /* Its contents are centered horizontally and vertically. */
-    display: grid;
-    justify-content: center;
-    align-content: center;
+    composes: content-stretch from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: justify-end from global;
+    composes: w-full from global;
+
+    composes: lg_content-center from global;
+    composes: lg_justify-center from global;
 }
 
 .mask {
     /* The mask takes up the entire screen. */
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
+    composes: absolute from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
 
     /* The mask is a semi-transparent grey. */
-    background-color: rgb(var(--venia-global-color-gray-darker));
-    opacity: 0.5;
+    composes: bg-gray-600 from global;
+    composes: opacity-50 from global;
 }
 
 /* The dialog is the only item in the form grid. */
+/* Nothing is allowed to overflow container itself. */
+/* Container is itself a grid container for its children. */
+/* Container can be the target of pointer events. */
+/* It sits on top of the mask. */
 .dialog {
-    background-color: rgb(var(--venia-global-color-background));
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px rgb(var(--venia-global-color-gray-darker));
-
     /* It sets maximum sizes so its body can handle overflow. */
-    height: 100%;
-    max-height: 90vh;
+    composes: h-full from global;
+    composes: max-h-full from global;
     /* Minimum keeps a 16:9 aspect ratio and is 40rem x 22.5rem.  */
-    min-height: 360px;
-    width: 640px;
-
-    /* Nothing is allowed to overflow container itself. */
-    overflow: hidden;
-
-    /* Container is itself a grid container for its children. */
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    /* Container can be the target of pointer events. */
-    pointer-events: auto;
-
-    /* It sits on top of the mask. */
-    z-index: 4;
+    composes: min-h-[360px] from global;
+    composes: w-[640px] from global;
+
+    composes: bg-white from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: max-w-modal from global;
+    composes: overflow-hidden from global;
+    composes: pointer-events-auto from global;
+    composes: rounded-md from global;
+    composes: shadow-dialog from global;
+    composes: z-dialog from global;
+
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-full from global;
 }
 
 /*
@@ -86,30 +97,34 @@
  */
 
 .header {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    height: 3.5rem;
-    padding: 0 0.75rem 0 1rem;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-[3.5rem] from global;
+    composes: pl-4 from global;
+    composes: pr-3 from global;
+    composes: py-0 from global;
 
     /* The Header is itself a grid container for its children. */
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr auto;
-    column-gap: 1rem;
-    align-items: center;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
 }
 
 .headerText {
-    color: rgb(var(--venia-global-color-text-alt));
-    text-transform: capitalize;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.25rem;
+    composes: capitalize from global;
+    composes: leading-tight from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: text-subtle from global;
+    composes: whitespace-nowrap from global;
 }
 
 .headerButton {
     /* Horizontally align the close button to the right. */
-    justify-self: right;
+    composes: justify-self-end from global;
 }
 
 /*
@@ -117,28 +132,34 @@
  */
 
 .body {
-    overflow: auto;
+    composes: overflow-auto from global;
 
     /* The Body is itself a grid container for its children. */
-    display: grid;
-    grid-template-rows: 1fr auto;
+    composes: grid from global;
+    composes: grid-rows-autoLast from global;
 }
 
 .contents {
-    padding: 1rem;
+    composes: p-xs from global;
 }
 
 .buttons {
-    padding: 2.5rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: p-md from global;
 
-    display: grid;
-    grid-auto-flow: column;
-    gap: 1rem;
-    justify-content: center;
+    composes: lg_grid-flow-col from global;
 }
 
 .confirmButton {
     composes: root_highPriority from '../Button/button.module.css';
+
+    /* On mobile the confirm button should be first (on top). */
+    composes: order-first from global;
+
+    composes: lg_order-unset from global;
 }
 
 .cancelButton {
@@ -152,11 +173,8 @@
  * dialogs slide out from the right.
  */
 
-@media (max-width: 960px) {
+@media (max-width: 959px) {
     .root {
-        left: auto;
-        right: 0;
-
         /* The Dialog starts off-screen on the right. */
         transform: translate3d(100%, 0, 0);
         /* For mobile, add position to the transitions. */
@@ -167,23 +185,4 @@
         /* The Dialog animates (slides) onto the screen. */
         transform: translate3d(0, 0, 0);
     }
-
-    .form {
-        align-content: stretch;
-        justify-content: end;
-    }
-
-    .dialog {
-        max-height: 100%;
-        max-width: 360px;
-    }
-
-    .buttons {
-        grid-auto-flow: row;
-    }
-
-    .confirmButton {
-        /* On mobile the confirm button should be first (on top). */
-        order: -1;
-    }
 }

package/lib/components/ErrorMessage/errorMessage.module.css

@@ -2,8 +2,8 @@
 }
 
 .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);
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: text-error from global;
+    composes: text-sm from global;
 }

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

@@ -1,36 +1,43 @@
 .root {
     background: var(--backroundImageUrl);
-    background-size: cover;
-    height: 600px;
-    padding: 1rem;
-
-    display: grid;
     /* two column grid because the "hangers" are on the right side of the page */
+    /* TODO @TW: review */
+    composes: bg-cover from global;
+    composes: content-center from global;
+    composes: grid from global;
+    composes: h-[600px] from global;
+    composes: p-xs from global;
     grid-template: 'content .';
-    align-content: center;
 }
 
 .content {
+    composes: content-start from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: text-center from global;
+    composes: text-white from global;
     grid-area: content;
-    display: grid;
-    grid-gap: 2rem;
-    text-align: center;
-    color: white;
+
+    composes: sm_gap-md from global;
 }
 
 .header {
-    font-size: var(--venia-global-fontSize-1000);
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
+    composes: text-2xl from global;
 }
 
 .message {
-    line-height: var(--venia-global-lineHeight-200);
+    composes: leading-tight from global;
+    /* add a little space so the button is centered below the message */
+    composes: pb-sm from global;
+
+    composes: sm_pb-0 from global;
 }
 
 .actionsContainer {
 }
 
-@media (max-width: 640px) {
+@media (max-width: 639px) {
     .root {
         background-image: var(--mobileBackgroundImageUrl);
         /* two row grid because the "hangers" are on the top of the page */
@@ -39,14 +46,4 @@
             '.'
             'content';
     }
-
-    .content {
-        align-content: start;
-        grid-gap: 1rem;
-    }
-
-    .message {
-        /* add a little space so the button is centered below the message */
-        padding-bottom: 1.5rem;
-    }
 }

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

@@ -1,38 +1,40 @@
 .root {
-    color: rgb(var(--venia-global-color-text));
-    display: grid;
-    align-content: start;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: text-colorDefault from global;
 }
 
 .label {
-    align-items: center;
-    display: flex;
-    font-size: 1rem;
-    font-weight: var(--venia-global-fontWeight-semibold);
-    justify-content: space-between;
-    line-height: 1rem;
-    padding: 0.5625rem 0.125rem;
+    composes: flex from global;
+    composes: font-semibold from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+    composes: leading-none from global;
+    composes: px-0.5 from global;
+    composes: py-2.5 from global;
+    composes: text-colorDefault from global;
     min-height: 2.125rem;
 }
 
-.input_base {
-    border-radius: 6px;
-    font-size: 1rem;
-    height: 2.5rem;
-    margin: 0;
-    max-width: 100%;
-    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
-    width: 100%;
-}
-
 .input {
-    composes: input_base;
-    background: white;
-    border: 2px solid rgb(var(--venia-global-color-gray-600));
-    color: rgb(var(--venia-global-color-text));
-    display: inline-flex;
-    flex: 0 0 100%;
-    -webkit-appearance: none;
+    composes: appearance-none from global;
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-input from global;
+    composes: flex-textInput from global;
+    composes: h-[2.5rem] from global;
+    composes: inline-flex from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: rounded-md from global;
+    composes: text-colorDefault from global;
+    composes: text-colorDefault from global;
+    composes: w-full from global;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */
+
+    composes: focus_outline-none from global;
+    composes: focus_shadow-inputFocus from global;
 }
 
 .input:disabled {
@@ -41,13 +43,8 @@
     color: rgb(var(--venia-global-color-gray-darker));
 }
 
-.input:focus {
-    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
-    outline: none;
-}
-
 .optional {
-    color: rgb(var(--venia-global-color-gray-700));
-    font-size: var(--venia-global-fontSize-100);
-    font-weight: var(--venia-global-fontWeight-normal);
+    composes: font-normal from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
 }

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

@@ -1,19 +1,20 @@
 .root {
-    display: inline-grid;
-    grid-auto-flow: column;
+    composes: grid-flow-col from global;
+    composes: h-[2.5rem] from global;
+    composes: inline-grid from global;
+    composes: w-full from global;
     grid-template-areas: 'before input after';
     grid-template-columns: auto 1fr auto;
-    height: 2.5rem;
-    width: 100%;
 }
 
 .input {
-    align-items: center;
-    display: flex;
+    composes: items-center from global;
+    composes: flex from global;
     grid-column: before-start / after-end;
     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);
@@ -21,15 +22,17 @@
 
 .before,
 .after {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 2px;
-    pointer-events: none;
-    width: 2.5rem;
-    z-index: 1;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: mx-0.5 from global;
+    composes: my-0 from global;
+    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;
@@ -43,6 +46,8 @@
     grid-area: after;
 }
 
+/* TODO @TW: cannot compose */
 .before svg {
+    /* composes: stroke-gray-600 from global; */
     stroke: rgb(var(--venia-global-color-gray-600));
 }

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

@@ -1,17 +1,21 @@
 .root {
-    color: rgb(var(--venia-global-color-text));
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1rem;
-    padding: 0.625rem 0.125rem 0.125rem;
+    composes: font-normal from global;
+    composes: leading-none from global;
+    composes: pb-0.5 from global;
+    composes: pt-2.5 from global;
+    composes: px-0.5 from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
 }
 
+/* TODO @TW: cannot compose */
 .root:empty {
     display: none;
 }
 
 .root_error {
     composes: root;
-    color: rgb(var(--venia-global-color-error));
-    font-weight: var(--venia-global-fontWeight-semibold);
+
+    composes: font-semibold from global;
+    composes: text-error from global;
 }

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -26,7 +26,7 @@ const CurrentFilter = props => {
             defaultMessage: 'Clear filter "{name}"'
         },
         {
-            name: item.title
+            name: item.label ? item.label : item.title
         }
     );
 
@@ -39,7 +39,9 @@ const CurrentFilter = props => {
             >
                 <Icon size={20} src={Remove} />
             </Trigger>
-            <span className={classes.text}>{item.title}</span>
+            <span className={classes.text}>
+                {item.label ? item.label : item.title}
+            </span>
         </span>
     );
 };

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

@@ -1,18 +1,21 @@
 .root {
-    align-items: center;
-    background-color: rgb(var(--venia-global-color-gray-700));
-    border-radius: 6px;
-    color: rgb(var(--venia-global-color-gray-50));
-    display: inline-grid;
-    font-weight: var(--venia-global-fontWeight-semibold);
-    gap: 0.5rem;
-    grid-auto-flow: column;
-    justify-content: center;
     min-height: 2.5rem;
-    padding: 0.625rem 0.75rem 0.625rem 0.5rem;
-    white-space: nowrap;
+    composes: bg-gray-700 from global;
+    composes: font-semibold from global;
+    composes: gap-2xs from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: pl-2 from global;
+    composes: pr-3 from global;
+    composes: py-2.5 from global;
+    composes: rounded-md from global;
+    composes: text-white from global;
 }
 
+/* TODO @TW: cannot compose */
 .root svg {
+    /* composes: stroke-white from global; */
     stroke: rgb(var(--venia-global-color-gray-50));
 }

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

@@ -1,13 +1,18 @@
 .root {
-    overflow: auto;
-    padding: 0 1.125rem;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: overflow-auto from global;
 }
 
+/* TODO @TW: cannot compose */
 .root:empty {
     display: none;
 }
 
-.root li {
-    float: left;
-    padding: 1rem 1rem 0 0;
+.item {
+    composes: float-left from global;
+    composes: pb-0 from global;
+    composes: pl-0 from global;
+    composes: pr-xs from global;
+    composes: pt-xs from global;
 }