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

package/lib/components/ProductOptions/swatch.module.css

@@ -4,7 +4,7 @@
 
     composes: root from './tile.module.css';
 
-    composes: border-shaded-10 from global;
+    @apply border-shaded-10;
     composes: text-white from global;
     composes: w-[3rem] from global;
     background: var(--venia-swatch-bg);
@@ -43,13 +43,12 @@
     composes: opacity-40 from global;
     composes: border-2 from global;
     composes: border-solid from global;
-    composes: border-gray-400 from global;
-}
-.root_outOfStock:after,
-.root_selected_outOfStock:after {
-    content: '';
-    position: absolute;
-    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
-    width: 62px;
-    transform: rotate(-45deg);
+    @apply border-gray-400;
+
+    composes: after_absolute from global;
+    composes: after_border-t-2 from global;
+    composes: after_border-solid from global;
+    composes: after_border-swatch from global;
+    composes: after_w-swatch from global;
+    composes: after_-rotate-45 from global;
 }

package/lib/components/ProductOptions/tile.module.css

@@ -34,14 +34,13 @@
     composes: opacity-50 from global;
     composes: border-2 from global;
     composes: border-solid from global;
-    composes: border-gray-400 from global;
+    @apply border-gray-400;
     composes: text-gray-600 from global;
-}
-.root_outOfStock:after,
-.root_selected_outOfStock:after {
-    content: '';
-    position: absolute;
-    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
-    width: 62px;
-    transform: rotate(-45deg);
+
+    composes: after_absolute from global;
+    composes: after_border-t-2 from global;
+    composes: after_border-solid from global;
+    composes: after_border-swatch from global;
+    composes: after_w-swatch from global;
+    composes: after_-rotate-45 from global;
 }

package/lib/components/ProductSort/productSort.module.css

@@ -38,13 +38,13 @@
     /* TODO @TW: review (C2). This is fragile to extend. */
     composes: root_lowPriority from '../../components/Button/button.module.css';
 
-    composes: min-w-[6.26rem] from global;
+    @apply min-w-[6.26rem];
 
     composes: lg_border-2 from global;
     composes: lg_border-gray-500 from global;
     composes: lg_font-normal from global;
     composes: lg_normal-case from global;
-    composes: lg_rounded-md from global;
+    composes: lg_rounded-input from global;
 }
 
 .desktopText {

package/lib/components/QuantityStepper/quantityStepper.module.css

@@ -15,16 +15,8 @@
     composes: justify-center from global;
 }
 
-/* TODO @TW: cannot compose */
 .label:not(:focus):not(:active) {
-    /* composes: sr-only from global; */
-    position: absolute;
-    overflow: hidden;
-    width: 1px;
-    height: 1px;
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    white-space: nowrap;
+    @apply sr-only;
 }
 
 .button {
@@ -36,7 +28,7 @@
     composes: inline-flex from global;
     composes: items-center from global;
     composes: justify-center from global;
-    composes: rounded-full from global;
+    composes: rounded-button from global;
     composes: w-[2rem] from global;
     stroke: rgb(var(--stroke));
 
@@ -48,12 +40,10 @@
     border-color: rgb(var(--stroke));
 }
 
-/* TODO @TW: cannot compose */
 .button:disabled,
 .button:disabled:hover {
     --stroke: rgb(var(--venia-global-color-gray-400));
-    /* composes: border-subtle from global; */
-    border-color: rgb(var(--venia-global-color-gray-400));
+    @apply border-base;
 }
 
 .button_decrement {

package/lib/components/RadioGroup/radio.module.css

@@ -41,10 +41,8 @@
     grid-area: input;
 }
 
-/* TODO @TW: cannot compose */
 .icon svg {
-    /* composes: stroke-gray-600 from global; */
-    stroke: rgb(var(--venia-global-color-gray-600));
+    @apply stroke-gray-600;
 }
 
 .label {
@@ -53,10 +51,8 @@
     grid-area: label;
 }
 
-/* TODO @TW: cannot compose */
 .input:checked + .icon svg {
-    /* composes: stroke-brand-base from global; */
-    stroke: rgb(var(--venia-brand-color-1-700));
+    @apply stroke-brand-base;
 }
 
 .input_shimmer {

package/lib/components/RadioGroup/radioGroup.module.css

@@ -16,9 +16,5 @@
 .message {
     composes: mt-xs from global;
     composes: text-colorDefault from global;
-}
-
-/* TODO @TW: cannot compose */
-.message:empty {
-    display: none;
+    composes: empty_hidden from global;
 }

package/lib/components/RichContent/richContent.module.css

@@ -4,143 +4,136 @@
 .root h4,
 .root h5,
 .root h6 {
-    margin-bottom: 0.5rem;
-    line-height: 1.25;
+    @apply mb-2;
+    @apply leading-tight;
 }
 
 .root h1 {
-    margin-top: 0.75rem;
-    font-size: 1.875rem;
-    font-weight: 400;
+    @apply mt-3;
+    @apply text-3xl/tight;
+    @apply font-normal;
 }
 
 .root h2 {
-    margin-top: 1rem;
-    font-size: 1.5rem;
-    font-weight: 400;
+    @apply mt-4;
+    @apply text-2xl/tight;
+    @apply font-normal;
 }
 
 .root h3 {
-    margin-top: 1rem;
-    font-size: 1.25rem;
-    font-weight: 400;
+    @apply mt-4;
+    @apply text-xl/tight;
+    @apply font-normal;
 }
 
 .root h4 {
-    margin-top: 1rem;
-    font-size: 1.125rem;
-    font-weight: 600;
+    @apply mt-4;
+    @apply text-lg/tight;
+    @apply font-semibold;
 }
 
 .root h5 {
-    margin-top: 1rem;
-    font-size: 1rem;
-    font-weight: 600;
+    @apply mt-4;
+    @apply text-base/tight;
+    @apply font-semibold;
 }
 
 .root h6 {
-    margin-top: 1rem;
-    font-size: 0.875rem;
-    font-weight: 600;
+    @apply mt-4;
+    @apply text-sm/tight;
+    @apply font-semibold;
 }
 
 .root p {
-    margin-bottom: 1rem;
-    line-height: 1.5;
+    @apply mb-4;
+    @apply leading-normal;
 }
 
 .root p:last-child {
-    margin-bottom: 0;
+    @apply mb-0;
 }
 
 .root img {
-    max-width: 100%;
-    margin: 1rem 0;
+    @apply max-w-full;
+    @apply my-4;
+    @apply mx-0;
 }
 
 .root ol,
 .root ul {
-    padding-left: 1.5rem;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    line-height: 1.5;
+    @apply pl-6;
+    @apply my-4;
+    @apply leading-normal;
 }
 
 .root p + ol,
 .root p + ul {
-    margin-top: 0;
+    @apply mt-0;
 }
 
-/* TODO @TW: cannot compose */
 .root ol {
-    /* composes: list-decimal from global; */
-    list-style-type: decimal;
+    @apply list-decimal;
 }
 
-/* TODO @TW: cannot compose */
 .root ul {
-    /* composes: list-disc from global; */
-    list-style-type: disc;
+    @apply list-disc;
 }
 
 .root a {
-    text-decoration: underline;
+    @apply underline;
 }
 
 .root blockquote {
-    margin: 1rem 0;
-    font-size: 1.25rem;
-    font-style: italic;
+    @apply my-4;
+    @apply mx-0;
+    @apply text-xl;
+    @apply italic;
 }
 
 .root table {
-    width: 100%;
-    text-align: left;
+    @apply w-full;
+    @apply text-left;
 }
 
 .root pre {
-    padding: 1rem;
-    /* composes: border from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border: 1px solid rgb(var(--venia-global-color-border));
-    /* composes: bg-gray-900 from global; */
-    background: rgb(var(--venia-global-color-gray));
+    @apply p-4;
+    @apply border;
+    @apply border-solid;
+    @apply border-subtle;
+    @apply bg-gray-900;
 }
 
 .root :global .cms-content-important {
-    padding: 1rem;
-    /* composes: border from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border: 1px solid rgb(var(--venia-global-color-border));
-    /* composes: bg-gray-900 from global; */
-    background: rgb(var(--venia-global-color-gray));
-    font-size: 1.125rem;
+    @apply p-4;
+    @apply border;
+    @apply border-solid;
+    @apply border-subtle;
+    @apply bg-gray-900;
+    @apply text-lg;
 }
 
-@media (min-width: 800px) {
+@media screen(md) {
     .root h1 {
-        font-size: 3rem;
+        @apply text-5xl/tight;
     }
 
     .root h2 {
-        font-size: 2.25rem;
+        @apply text-4xl/tight;
     }
 
     .root h3 {
-        font-size: 1.875rem;
+        @apply text-3xl/tight;
     }
 
     .root h4 {
-        font-size: 1.5rem;
+        @apply text-2xl/tight;
     }
 
     .root h5 {
-        font-size: 1.125rem;
+        @apply text-lg/tight;
     }
 
     .root h6 {
-        font-size: 1rem;
+        @apply text-base/tight;
     }
 }

package/lib/components/RichText/richText.module.css

@@ -5,15 +5,14 @@
     composes: text-sm from global;
 }
 
-/* TODO @TW: cannot compose */
 .root p {
-    margin: 0 0 1rem;
+    @apply m-0;
+    @apply mb-4;
 }
 
-/* TODO @TW: cannot compose */
 .root ul {
-    /* composes: list-disc from global; */
-    list-style-type: disc;
-    margin: 0 0 1rem;
-    padding-left: 2.5rem;
+    @apply list-disc;
+    @apply m-0;
+    @apply mb-4;
+    @apply pl-10;
 }

package/lib/components/SavedPaymentsPage/creditCard.module.css

@@ -8,7 +8,7 @@
     composes: min-w-[20rem] from global;
     composes: px-md from global;
     composes: py-sm from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: relative from global;
     min-height: 10rem;
 }
@@ -16,7 +16,7 @@
 .root_active {
     composes: root;
 
-    composes: border-brand-dark from global;
+    @apply border-brand-dark;
 }
 
 .title {
@@ -43,7 +43,7 @@
 .deleteButton {
     composes: root from '../LinkButton/linkButton.module.css';
 
-    composes: no-underline from global;
+    @apply no-underline;
 }
 
 .deleteConfirmationContainer {
@@ -58,37 +58,31 @@
     composes: opacity-100 from global;
     composes: px-md from global;
     composes: py-xs from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: top-0 from global;
     composes: w-full from global;
+    composes: visible from global;
     grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
     transform: scaleX(1);
     transition-duration: 192ms;
     transition-timing-function: var(--venia-global-anim-in);
     transition-property: opacity, transform, visibility;
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .deleteConfirmationContainer_hidden {
     composes: deleteConfirmationContainer;
 
-    composes: opacity-0 from global;
+    @apply opacity-0;
+    @apply invisible;
     transform: scaleX(0);
     transition-delay: 0s, 192ms, 0s;
     transition-timing-function: var(--venia-global-anim-out);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .confirmDeleteButton {
     composes: root_normalPriorityNegative from '../Button/button.module.css';
 
-    composes: bg-white from global;
+    @apply bg-white;
     composes: order-1 from global;
     composes: order-first from global;
 }
@@ -96,7 +90,7 @@
 .cancelDeleteButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: bg-white from global;
+    @apply bg-white;
 }
 
 .deleteText {
@@ -105,7 +99,7 @@
     composes: xs_lg_block from global;
 }
 
-@media (max-width: 479px) {
+@media screen(-xs) {
     .deleteConfirmationContainer {
         transform: scaleY(1);
     }

package/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css

@@ -24,15 +24,13 @@
     composes: lg_text-center from global;
 }
 
-/* prettier-ignore */
 .content {
     composes: gap-xs from global;
     composes: grid from global;
     composes: grid-cols-1 from global;
     grid-auto-rows: minmax(6rem, max-content);
 
-    /* TODO @TW: review (B7) */
-    composes: lg_grid-cols-[1fr,1fr,1fr] from global;
+    composes: lg_grid-cols-[1fr_1fr_1fr] from global;
 }
 
 .noPayments {
@@ -44,7 +42,7 @@
     composes: border-solid from global;
     composes: border-subtle from global;
     composes: font-semibold from global;
-    composes: rounded-md from global;
+    composes: rounded-button from global;
     composes: text-brand-dark from global;
     composes: text-sm from global;
     transition: border-color 384ms var(--venia-global-anim-standard);

package/lib/components/SearchBar/autocomplete.module.css

@@ -44,19 +44,13 @@
     composes: py-0 from global;
     composes: text-center from global;
     composes: text-subtle from global;
-}
 
-/* TODO @TW: cannot compose */
-.message:empty {
-    padding: 0;
+    composes: empty_hidden from global;
 }
 
 .suggestions {
     composes: gap-2xs from global;
     composes: grid from global;
-}
 
-/* TODO @TW: cannot compose */
-.suggestions:empty {
-    display: none;
+    composes: empty_hidden from global;
 }

package/lib/components/SearchBar/searchBar.module.css

@@ -7,19 +7,14 @@
     composes: py-0 from global;
     composes: w-full from global;
 
-    /* TODO @TW: review (B6) */
-    /* composes: hidden from global; */
-    display: none;
+    @apply hidden;
 }
 
 .root_open {
     composes: root;
 
     composes: z-dropdown from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: grid from global; */
-    display: grid;
+    @apply grid;
 }
 
 .form {

package/lib/components/SearchBar/suggestedCategories.module.css

@@ -5,9 +5,6 @@
     composes: gap-3 from global;
     composes: grid from global;
     composes: pt-3 from global;
-}
 
-/* TODO @TW: cannot compose */
-.root:empty {
-    display: none;
+    composes: empty_hidden from global;
 }

package/lib/components/SearchBar/suggestedProducts.module.css

@@ -5,9 +5,6 @@
     composes: gap-3 from global;
     composes: grid from global;
     composes: pt-3 from global;
-}
 
-/* TODO @TW: cannot compose */
-.products:empty {
-    display: none;
+    composes: empty_hidden from global;
 }

package/lib/components/SearchPage/searchPage.module.css

@@ -10,7 +10,7 @@
 }
 
 .headerButtons {
-    flex-basis: 100%;
+    composes: basis-full from global;
     composes: flex from global;
     composes: justify-center from global;
     composes: mx-0 from global;
@@ -42,12 +42,7 @@
     composes: mt-10 from global;
 
     composes: lg_m-0 from global;
-}
-
-@media (min-width: 960px) {
-    .searchInfo {
-        flex-basis: 100%;
-    }
+    composes: lg_basis-full from global;
 }
 
 .totalPages {

package/lib/components/Select/select.module.css

@@ -20,5 +20,5 @@
 }
 
 .input_error {
-    composes: border-error from global;
+    @apply border-error;
 }