feat: update grayscale names + change all color select schema fields …

…to color fields

app/components/Account/Addresses/AddressesItem.tsx

@@ -95,7 +95,7 @@ export function AddressesItem({
         </div>
 
         {isDefaultAddress && (
-          <p className="text-nav text-right text-mediumGray">Default</p>
+          <p className="text-nav text-right text-neutralLight">Default</p>
         )}
       </div>
 

app/components/Account/Order/OrderItem.tsx

@@ -71,7 +71,7 @@ export function OrderItem({item}: {item: OrderLineItem}) {
             {discountedPrice && (
               <Money
                 as="p"
-                className="text-mediumDarkGray line-through"
+                className="text-neutralMedium line-through"
                 data={discountedPrice}
               />
             )}
@@ -91,7 +91,7 @@ export function OrderItem({item}: {item: OrderLineItem}) {
         {discountedPrice && (
           <Money
             as="p"
-            className="text-mediumDarkGray line-through"
+            className="text-neutralMedium line-through"
             data={discountedPrice}
           />
         )}
@@ -106,7 +106,7 @@ export function OrderItem({item}: {item: OrderLineItem}) {
         {discountedPrice && (
           <Money
             as="p"
-            className="text-mediumDarkGray line-through"
+            className="text-neutralMedium line-through"
             data={discountedPrice}
           />
         )}

app/components/Account/Profile.tsx

@@ -76,7 +76,7 @@ export function Profile() {
         <label htmlFor="email" className="col-span-2">
           <span className="input-label">Email</span>
           <input
-            className="input-text text-mediumDarkGray"
+            className="input-text text-neutralMedium"
             disabled
             id="email"
             name="email"

app/components/AccountLayout/CustomerAccountLayout.tsx

@@ -102,7 +102,7 @@ export function CustomerAccountLayout({children}: {children: React.ReactNode}) {
           <Menu as="div" className="relative w-full md:hidden">
             <MenuButton
               aria-label="Open account menu"
-              className="flex h-14 w-full items-center justify-between gap-4 rounded border border-mediumGray px-5 text-base"
+              className="flex h-14 w-full items-center justify-between gap-4 rounded border border-neutralLight px-5 text-base"
               type="button"
             >
               <p>{activeMenuItem?.link?.text}</p>
@@ -117,7 +117,7 @@ export function CustomerAccountLayout({children}: {children: React.ReactNode}) {
 
             <Transition
               as="div"
-              className="absolute left-0 top-[calc(100%+0.5rem)] z-10 w-full rounded border border-mediumGray bg-background text-base"
+              className="absolute left-0 top-[calc(100%+0.5rem)] z-10 w-full rounded border border-neutralLight bg-background text-base"
               enter="transition duration-100 ease-out"
               enterFrom="transform scale-95 opacity-0"
               enterTo="transform scale-100 opacity-100"
@@ -137,8 +137,8 @@ export function CustomerAccountLayout({children}: {children: React.ReactNode}) {
                         return (
                           <Link
                             aria-label={link.text}
-                            className={`w-full px-5 py-1.5 transition md:hover:bg-offWhite ${
-                              selected ? 'bg-lightGray' : ''
+                            className={`w-full px-5 py-1.5 transition md:hover:bg-neutralLightest ${
+                              selected ? 'bg-neutralLighter' : ''
                             }`}
                             onClick={close}
                             to={link.url}

app/components/Cart/CartDiscounts.tsx

@@ -82,7 +82,7 @@ export const CartDiscounts = memo(() => {
         </label>
         <button
           type="submit"
-          className="h-full border-l border-border px-2 text-sm transition md:hover:bg-offWhite"
+          className="h-full border-l border-border px-2 text-sm transition md:hover:bg-neutralLightest"
         >
           Apply
         </button>
@@ -100,7 +100,7 @@ export const CartDiscounts = memo(() => {
             return (
               <li key={code}>
                 <button
-                  className="flex max-w-full items-center gap-1 rounded-full bg-offWhite py-2 pl-2.5 pr-3 text-xs uppercase transition md:hover:bg-lightGray"
+                  className="flex max-w-full items-center gap-1 rounded-full bg-neutralLightest py-2 pl-2.5 pr-3 text-xs uppercase transition md:hover:bg-neutralLighter"
                   onClick={() => handleClearCode(code)}
                   type="button"
                 >

app/components/Cart/CartLine/CartLine.tsx

@@ -46,7 +46,7 @@ export const CartLine = memo(({closeCart, line}: CartLineProps) => {
               : PRODUCT_IMAGE_ASPECT_RATIO
           }
           width="88px"
-          className="bg-offWhite"
+          className="bg-neutralLightest"
         />
       </Link>
 
@@ -61,7 +61,7 @@ export const CartLine = memo(({closeCart, line}: CartLineProps) => {
           </Link>
 
           {merchandise.title !== 'Default Title' && (
-            <p className="text-sm text-mediumDarkGray">{merchandise.title}</p>
+            <p className="text-sm text-neutralMedium">{merchandise.title}</p>
           )}
 
           <button
@@ -103,7 +103,7 @@ export const CartLine = memo(({closeCart, line}: CartLineProps) => {
                           viewBox="0 0 24 24"
                         />
                       )}
-                      <p className="flex-1 pb-1 text-xs text-mediumDarkGray">
+                      <p className="flex-1 pb-1 text-xs text-neutralMedium">
                         {discount.title || discount.code}
                       </p>
                     </div>
@@ -113,7 +113,7 @@ export const CartLine = memo(({closeCart, line}: CartLineProps) => {
 
             <div className="flex flex-wrap justify-end gap-x-2">
               {compareAtPrice && (
-                <p className="text-mediumDarkGray line-through">
+                <p className="text-neutralMedium line-through">
                   {compareAtPrice}
                 </p>
               )}

app/components/Cart/CartTotals/CartTotalsDiscountItem.tsx

@@ -23,7 +23,7 @@ export function CartTotalsDiscountItem({
   const title = (discount as CartAutomaticDiscountAllocation).title;
 
   return formattedDiscount ? (
-    <div className="flex justify-between text-sm text-mediumDarkGray">
+    <div className="flex justify-between text-sm text-neutralMedium">
       <div className="flex items-center gap-1">
         {code && (
           <Svg

app/components/Cart/CartUpsell/CartUpsell.tsx

@@ -83,7 +83,7 @@ export const CartUpsell = memo(({closeCart, settings}: CartUpsellProps) => {
           >
             <h3 className="px-5 text-center text-xs font-normal">{message}</h3>
 
-            <div className="absolute right-4 top-1/2 -translate-y-1/2 text-mediumDarkGray">
+            <div className="absolute right-4 top-1/2 -translate-y-1/2 text-neutralMedium">
               {open ? (
                 <Svg
                   className="w-4 text-current"

app/components/Cart/CartUpsell/CartUpsellItem.tsx

@@ -92,7 +92,7 @@ export function CartUpsellItem({
 
           <div className="flex flex-1 flex-wrap justify-end gap-x-1">
             {compareAtPrice && (
-              <p className="text-xs text-mediumDarkGray line-through">
+              <p className="text-xs text-neutralMedium line-through">
                 {compareAtPrice}
               </p>
             )}

app/components/Cart/FreeShippingMeter.tsx

@@ -71,7 +71,7 @@ export const FreeShippingMeter = memo(({settings}: FreeShippingMeterProps) => {
     <div className="border-b border-b-border p-4">
       <p className="mb-2 text-center text-xs">{progress.message}</p>
 
-      <div className="h-1.5 w-full overflow-hidden rounded bg-lightGray">
+      <div className="h-1.5 w-full overflow-hidden rounded bg-neutralLighter">
         <div
           className="size-full origin-left transition"
           style={{

app/components/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterDropdown.tsx

@@ -103,7 +103,7 @@ export function CollectionFilterDropdown({
               <h3 className="text-nav">{filter.label}</h3>
 
               {totalSelectedOptions > 0 && (
-                <p className="ml-1 text-2xs text-mediumDarkGray">
+                <p className="ml-1 text-2xs text-neutralMedium">
                   ({totalSelectedOptions})
                 </p>
               )}

app/components/Collection/CollectionFilters/CollectionFilterDropdown/CollectionFilterOption.tsx

@@ -82,9 +82,9 @@ export function CollectionFilterOption({
   return (
     <button
       aria-label={`Add ${label} to filters`}
-      className={`group flex gap-3 px-4 text-left text-base transition max-md:h-10 max-md:w-full max-md:items-center md:gap-2 hover:md:text-text disabled:hover:md:text-mediumDarkGray ${
+      className={`group flex gap-3 px-4 text-left text-base transition max-md:h-10 max-md:w-full max-md:items-center md:gap-2 hover:md:text-text disabled:hover:md:text-neutralMedium ${
         disabled ? 'cursor-not-allowed opacity-60' : ''
-      } ${isActive ? 'text-text max-md:font-bold' : 'text-mediumDarkGray'}`}
+      } ${isActive ? 'text-text max-md:font-bold' : 'text-neutralMedium'}`}
       disabled={disabled}
       onClick={() => {
         if (isActive) {

app/components/Collection/CollectionFilters/CollectionFilterDropdown/MultiRangeSlider.tsx

@@ -126,7 +126,7 @@ export const MultiRangeSlider = ({
         </label>
 
         <div className="relative w-full">
-          <div className="absolute z-[1] h-1 w-full rounded-[3px] bg-lightGray"></div>
+          <div className="absolute z-[1] h-1 w-full rounded-[3px] bg-neutralLighter"></div>
           <div
             ref={range}
             className="absolute z-[2] h-1 rounded-[3px] bg-black"

app/components/Collection/CollectionFilters/CollectionFiltersSummary.tsx

@@ -46,7 +46,7 @@ export const CollectionFiltersSummary = memo(
           return (
             <li key={index} className="max-w-full">
               <button
-                className="flex max-w-full items-center rounded-full bg-offWhite py-2 pl-2.5 pr-3 text-xs transition md:hover:bg-lightGray"
+                className="flex max-w-full items-center rounded-full bg-neutralLightest py-2 pl-2.5 pr-3 text-xs transition md:hover:bg-neutralLighter"
                 onClick={() => {
                   removeFilter(id);
                 }}

app/components/Collection/CollectionFilters/CollectionMobileFilters.tsx

@@ -51,7 +51,7 @@ export const CollectionMobileFilters = memo(
             {totalFilters ? (
               <CollectionFiltersSummary hideClear />
             ) : (
-              <p className="text-sm leading-8 text-mediumDarkGray">
+              <p className="text-sm leading-8 text-neutralMedium">
                 No filters selected yet
               </p>
             )}

app/components/Container/Container.tsx

@@ -9,7 +9,6 @@ export function Container({
 }) {
   const {
     bgColor,
-    bgColorCustom,
     tabletDesktopPaddingTop,
     tabletDesktopPaddingBottom,
     tabletDesktopMarginBottom,
@@ -22,7 +21,7 @@ export function Container({
   return (
     <div
       className={`relative ${paddingClasses} ${marginClasses}`}
-      style={{backgroundColor: bgColorCustom || bgColor}}
+      style={{backgroundColor: bgColor}}
     >
       {children}
     </div>

app/components/Document/ApplicationError.tsx

@@ -39,7 +39,7 @@ export function ApplicationError({error}: ApplicationErrorProps) {
               </h1>
 
               <div className="flex-1 overflow-y-auto">
-                <pre className="overflow-auto bg-offWhite p-8 text-red-500">
+                <pre className="overflow-auto bg-neutralLightest p-8 text-red-500">
                   {error instanceof Error
                     ? error.stack
                     : typeof error === 'string'
@@ -48,7 +48,7 @@ export function ApplicationError({error}: ApplicationErrorProps) {
                 </pre>
               </div>
 
-              <p className="mt-4 text-xs text-mediumDarkGray">
+              <p className="mt-4 text-xs text-neutralMedium">
                 This page can only load until the runtime error is resolved.
               </p>
             </div>

app/components/Document/ServerError.tsx

@@ -73,7 +73,7 @@ export function ServerError({error}: ServerErrorProps) {
               test
             </pre>
 
-            <p className="mt-4 text-xs text-mediumDarkGray">
+            <p className="mt-4 text-xs text-neutralMedium">
               This page can only load until the server side error is resolved.
             </p>
           </div>

app/components/Footer/EmailSignup.tsx

@@ -28,7 +28,7 @@ export const EmailSignup = memo(
 
     return enabled ? (
       <form
-        className="border-b border-b-mediumGray px-4 py-8 md:border-none md:p-0"
+        className="border-b border-b-neutralLight px-4 py-8 md:border-none md:p-0"
         onSubmit={handleSubmit}
         ref={formRef}
       >

app/components/Footer/Footer.tsx

@@ -19,7 +19,7 @@ export const Footer = memo(() => {
     >
       <div className="mx-auto grid max-w-[var(--content-max-width)] grid-cols-1 md:grid-cols-[1fr_300px] md:gap-x-5 md:gap-y-10 xl:grid-cols-[200px_1fr_300px]">
         <div className="order-1 col-span-1 w-full md:col-span-2 xl:col-span-1">
-          <div className="flex gap-6 border-b border-b-mediumGray px-4 pb-8 md:border-none md:p-0 xl:flex-col">
+          <div className="flex gap-6 border-b border-b-neutralLight px-4 pb-8 md:border-none md:p-0 xl:flex-col">
             <Link to="/" aria-label="Go to home page">
               <Svg
                 className="w-12 text-current"

app/components/Footer/MobileMenuItem.tsx

@@ -14,7 +14,7 @@ export function MobileMenuItem({
   item: Settings['footer']['menu']['menuItems'][number];
 }) {
   return (
-    <Disclosure as="div" className="border-b border-b-mediumGray">
+    <Disclosure as="div" className="border-b border-b-neutralLight">
       {({open}) => (
         <>
           <DisclosureButton

app/components/Header/Navigation.tsx

@@ -70,7 +70,7 @@ export const Navigation = memo(
                     <Link
                       aria-label={item.navItem?.text}
                       className={`group relative flex cursor-pointer items-center px-4 transition ${
-                        isHovered ? 'bg-offWhite' : 'bg-background'
+                        isHovered ? 'bg-neutralLightest' : 'bg-background'
                       }`}
                       to={item.navItem?.url}
                       onClick={handleDesktopMenuClose}

app/components/Image/Image.tsx

@@ -26,13 +26,13 @@ export const Image = forwardRef(
         data={data}
         aspectRatio={aspectRatio}
         width={width}
-        className={`bg-offWhite object-cover ${className}`}
+        className={`bg-neutralLightest object-cover ${className}`}
         {...props}
       />
     ) : (
       <div
         ref={ref}
-        className={`relative overflow-hidden bg-offWhite ${className}`}
+        className={`relative overflow-hidden bg-neutralLightest ${className}`}
         style={{aspectRatio, width}}
       >
         {withLoadingAnimation && <div className="loading-shimmer opacity-60" />}

app/components/Markdown/Markdown.tsx

@@ -30,7 +30,7 @@ export const Markdown = forwardRef(
     return (
       <div
         ref={ref}
-        className={`[&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_a]:underline [&_h1]:mb-6 [&_h1]:text-center [&_h2]:mb-5 [&_h2]:mt-8 [&_h3]:mb-4 [&_h3]:mt-6 [&_h4]:my-4 [&_h5]:mb-4 [&_h5]:mt-2 [&_h6]:mb-4 [&_li>p]:mb-0 [&_li]:mb-2 [&_ol>li]:list-decimal [&_ol]:mb-4 [&_ol]:pl-8 [&_p]:mb-4 [&_table]:relative [&_table]:mb-4 [&_table]:w-full [&_table]:table-fixed [&_table]:border-collapse [&_table]:overflow-x-auto [&_table]:border [&_table]:border-border [&_td]:border [&_td]:border-border [&_td]:p-3 [&_td]:text-center [&_td]:align-top [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1.5 [&_thead]:bg-offWhite [&_ul>li]:list-disc [&_ul]:mb-4 [&_ul]:pl-8 ${pTextAlign} ${hTextAlign}`}
+        className={`[&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_a]:underline [&_h1]:mb-6 [&_h1]:text-center [&_h2]:mb-5 [&_h2]:mt-8 [&_h3]:mb-4 [&_h3]:mt-6 [&_h4]:my-4 [&_h5]:mb-4 [&_h5]:mt-2 [&_h6]:mb-4 [&_li>p]:mb-0 [&_li]:mb-2 [&_ol>li]:list-decimal [&_ol]:mb-4 [&_ol]:pl-8 [&_p]:mb-4 [&_table]:relative [&_table]:mb-4 [&_table]:w-full [&_table]:table-fixed [&_table]:border-collapse [&_table]:overflow-x-auto [&_table]:border [&_table]:border-border [&_td]:border [&_td]:border-border [&_td]:p-3 [&_td]:text-center [&_td]:align-top [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1.5 [&_thead]:bg-neutralLightest [&_ul>li]:list-disc [&_ul]:mb-4 [&_ul]:pl-8 ${pTextAlign} ${hTextAlign}`}
       >
         <ReactMarkdown
           remarkPlugins={[remarkGfm, remarkBreaks]}

app/components/Modal/Modal.tsx

@@ -46,7 +46,7 @@ export const Modal = memo(() => {
           >
             <button
               aria-label="Close modal"
-              className="absolute right-0 top-0  z-10 flex size-7 items-center justify-center bg-offWhite"
+              className="absolute right-0 top-0  z-10 flex size-7 items-center justify-center bg-neutralLightest"
               onClick={closeModal}
               type="button"
             >

app/components/Product/ProductHeader.tsx

@@ -53,7 +53,7 @@ export function ProductHeader({
 
       <div className="mt-2 flex min-h-6 gap-2">
         {compareAtPrice && (
-          <p className="text-mediumDarkGray line-through">{compareAtPrice}</p>
+          <p className="text-neutralMedium line-through">{compareAtPrice}</p>
         )}
         <p>{price}</p>
       </div>

app/components/Product/ProductMedia/ProductMedia.tsx

@@ -56,7 +56,7 @@ export function ProductMedia({
     <div className="grid grid-cols-1 justify-between gap-4 lg:grid-cols-[80px_calc(100%-100px)] xl:gap-5">
       <div className="order-1 lg:order-2">
         <div
-          className="relative md:bg-offWhite"
+          className="relative md:bg-neutralLightest"
           // for a static/consistent aspect ratio, delete style below and add 'aspect-[var(--product-image-aspect-ratio)]' to className
           // set var(--product-image-aspect-ratio) in styles/app.css
           style={{

app/components/Product/ProductMedia/ProductMediaFile.tsx

@@ -40,7 +40,7 @@ export function ProductMediaFile({
 
   return (
     <div
-      className="relative bg-offWhite"
+      className="relative bg-neutralLightest"
       ref={ref}
       style={{
         aspectRatio:

app/components/Product/ProductMetafields/ProductMetafieldsAccordion.tsx

@@ -26,7 +26,7 @@ export function ProductMetafieldsAccordion({
         <>
           <DisclosureButton
             aria-label={`${open ? 'Close' : 'Open'} accordion for ${title}`}
-            className="flex h-14 w-full items-center justify-between gap-x-4 bg-offWhite p-4"
+            className="flex h-14 w-full items-center justify-between gap-x-4 bg-neutralLightest p-4"
             type="button"
           >
             <span className="text-sm font-bold">{title}</span>

app/components/Product/ProductOptions/ProductOptionValue/InnerOptionValue.tsx

@@ -11,7 +11,7 @@ export function InnerOptionValue({
     : 'cursor-not-allowed';
   const selectedClass = isSelected ? 'border-text' : '';
   const unavailableClass = !isAvailable
-    ? 'after:h-px after:w-[150%] after:rotate-[135deg] after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:bg-mediumGray text-mediumGray overflow-hidden'
+    ? 'after:h-px after:w-[150%] after:rotate-[135deg] after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:bg-neutralLight text-neutralLight overflow-hidden'
     : '';
 
   return (

app/components/Product/ProductOptions/ProductOptionValuesLabel.tsx

@@ -15,7 +15,7 @@ export function ProductOptionValuesLabel({
     openModal(
       <div>
         <h2 className="text-h3 mb-6 text-center">Size Guide</h2>
-        <div className="h-[30rem] bg-offWhite" />
+        <div className="h-[30rem] bg-neutralLightest" />
       </div>,
     );
   }, []);
@@ -26,7 +26,7 @@ export function ProductOptionValuesLabel({
         <h3 className="text-nav leading-6">{name}</h3>
 
         {selectedValue && (
-          <p className="text-base text-mediumDarkGray">{selectedValue}</p>
+          <p className="text-base text-neutralMedium">{selectedValue}</p>
         )}
       </div>
 

app/components/ProductItem/ColorVariantSelector/ColorVariantOption.tsx

@@ -63,7 +63,7 @@ export function ColorVariantOption({
       </button>
 
       {enabledColorNameOnHover && (
-        <p className="pointer-events-none absolute bottom-[calc(100%+2px)] left-1/4 hidden whitespace-nowrap rounded bg-offWhite px-1 text-2xs leading-[14px] text-mediumDarkGray opacity-0 transition duration-75 md:block group-hover/color:md:opacity-100">
+        <p className="pointer-events-none absolute bottom-[calc(100%+2px)] left-1/4 hidden whitespace-nowrap rounded bg-neutralLightest px-1 text-2xs leading-[14px] text-neutralMedium opacity-0 transition duration-75 md:block group-hover/color:md:opacity-100">
           {color.name}
         </p>
       )}