[project-base] [SSP-2454] Storefront color system implementation (#3311)

shopsys · Aug 7, 2024 · 083fb2d · 083fb2d
2 parents 3935910 + 8827f51
commit 083fb2d
Show file tree

Hide file tree

Showing 337 changed files with 1,341 additions and 1,331 deletions.
diff --git a/storefront/components/Basic/CopyTextBlock/CopyTextBlock.tsx b/storefront/components/Basic/CopyTextBlock/CopyTextBlock.tsx
@@ -1,3 +1,4 @@
+import { Button } from 'components/Forms/Button/Button';
 import { useState } from 'react';
 
 type CopyTextBlockProps = {
@@ -17,11 +18,11 @@ export const CopyTextBlock: FC<CopyTextBlockProps> = ({ textToCopy }) => {
     };
 
     return (
-        <div className="rounded bg-graySlate">
-            <div className="flex justify-end rounded bg-skyBlue px-3 py-2">
-                <button className="text-white" onClick={handleCopy}>
+        <div className="rounded bg-backgroundAccentLess">
+            <div className="flex justify-end px-3 py-2">
+                <Button variant="inverted" onClick={handleCopy}>
                     {copyButtonText}
-                </button>
+                </Button>
             </div>
             <div className="p-3">
                 <p>{textToCopy.length < 500 ? textToCopy : textToCopy.slice(0, 500) + '...'}</p>

diff --git a/storefront/components/Basic/Flag/Flag.tsx b/storefront/components/Basic/Flag/Flag.tsx
@@ -5,8 +5,10 @@ type FlagProps = { href?: string };
 
 export const Flag: FC<FlagProps> = ({ children, href, className }) => {
     const flagTwClass = twMergeCustom(
-        'inline-flex rounded bg-secondaryLight py-1 px-2 text-xs uppercase text-dark no-underline hover:text-dark hover:no-underline',
+        'inline-flex rounded py-1 px-2 text-xs uppercase',
         className,
+        'bg-backgroundAccent !text-textInverted no-underline',
+        'hover:bg-backgroundAccentMore hover:text-textInverted hover:!no-underline',
     );
 
     if (href) {

diff --git a/storefront/components/Basic/GoogleMap/GoogleMapSingleMarker.tsx b/storefront/components/Basic/GoogleMap/GoogleMapSingleMarker.tsx
@@ -12,7 +12,7 @@ export const GoogleMapSingleMarker: FC<GoogleMapSingleMarkerProps> = ({ isActive
         <GoogleMapMarkerIcon
             className={twJoin(
                 'w-10 h-10',
-                isActive ? 'origin-bottom scale-125 text-primary' : 'text-secondary',
+                isActive ? 'origin-bottom scale-125 text-text' : 'text-textAccent',
                 isDetail ? 'cursor-default' : 'cursor-pointer',
             )}
         />

diff --git a/storefront/components/Basic/Icon/CheckmarkBadgeIcon.tsx b/storefront/components/Basic/Icon/CheckmarkBadgeIcon.tsx
@@ -2,7 +2,7 @@ export const CheckmarkBadgeIcon: SvgFC = (props) => (
     <svg {...props} fill="none" viewBox="0 0 22 23" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M8 11.5L10 13.5L14.5 9M16.9012 4.49851C17.1071 4.99653 17.5024 5.3924 18.0001 5.59907L19.7452 6.32198C20.2433 6.52828 20.639 6.92399 20.8453 7.42206C21.0516 7.92012 21.0516 8.47974 20.8453 8.97781L20.1229 10.7218C19.9165 11.2201 19.9162 11.7803 20.1236 12.2783L20.8447 14.0218C20.9469 14.2685 20.9996 14.5329 20.9996 14.7999C20.9997 15.067 20.9471 15.3314 20.8449 15.5781C20.7427 15.8249 20.5929 16.049 20.4041 16.2378C20.2152 16.4266 19.991 16.5764 19.7443 16.6785L18.0004 17.4009C17.5023 17.6068 17.1065 18.0021 16.8998 18.4998L16.1769 20.245C15.9706 20.7431 15.575 21.1388 15.0769 21.3451C14.5789 21.5514 14.0193 21.5514 13.5212 21.3451L11.7773 20.6227C11.2792 20.4169 10.7198 20.4173 10.2221 20.6239L8.47689 21.3458C7.97912 21.5516 7.42001 21.5514 6.92237 21.3453C6.42473 21.1391 6.02925 20.7439 5.82281 20.2464L5.09972 18.5006C4.8938 18.0026 4.49854 17.6067 4.00085 17.4L2.25566 16.6771C1.75783 16.4709 1.36226 16.0754 1.15588 15.5777C0.949508 15.0799 0.949228 14.5205 1.1551 14.0225L1.87746 12.2786C2.08325 11.7805 2.08283 11.2211 1.8763 10.7233L1.15497 8.97678C1.0527 8.7301 1.00004 8.46568 1 8.19863C0.999957 7.93159 1.05253 7.66715 1.15472 7.42043C1.25691 7.17372 1.40671 6.94955 1.59557 6.76075C1.78442 6.57195 2.00862 6.42222 2.25537 6.3201L3.9993 5.59772C4.49687 5.39197 4.89248 4.9972 5.0993 4.50006L5.82218 2.75481C6.02848 2.25674 6.42418 1.86103 6.92222 1.65473C7.42027 1.44842 7.97987 1.44842 8.47792 1.65473L10.2218 2.37712C10.7199 2.58291 11.2793 2.58249 11.7771 2.37595L13.523 1.65585C14.021 1.44966 14.5804 1.4497 15.0784 1.65597C15.5763 1.86223 15.972 2.25783 16.1783 2.75576L16.9014 4.50153L16.9012 4.49851Z"
-            stroke="#00CDBE"
+            stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"

diff --git a/storefront/components/Basic/Icon/CompareIcon.tsx b/storefront/components/Basic/Icon/CompareIcon.tsx
@@ -5,13 +5,13 @@ export const CompareIcon: SvgFC = (props) => (
             fill="transparent"
             stroke="currentColor"
             strokeLinejoin="round"
-            strokeWidth="1.5"
+            strokeWidth="2.5"
         />
         <path
             d="M4.7 9.624c0 1.134-.897 2.028-1.975 2.028-1.077 0-1.975-.894-1.975-2.028 0-1.133.898-2.027 1.975-2.027 1.078 0 1.976.894 1.976 2.027Z"
             fill="transparent"
             stroke="currentColor"
-            strokeWidth="1.5"
+            strokeWidth="2.5"
         />
         <path d="M10.233 1v14.056" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
         <path
@@ -20,13 +20,13 @@ export const CompareIcon: SvgFC = (props) => (
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            strokeWidth="1.5"
+            strokeWidth="2.5"
         />
         <path
             d="M19.25 8.671c0 .95-.751 1.695-1.648 1.695-.897 0-1.648-.745-1.648-1.694 0-.95.751-1.695 1.648-1.695.897 0 1.648.745 1.648 1.694Z"
             fill="transparent"
             stroke="currentColor"
-            strokeWidth="1.5"
+            strokeWidth="2.5"
         />
     </svg>
 );
diff --git a/storefront/components/Basic/Icon/HeartIcon.tsx b/storefront/components/Basic/Icon/HeartIcon.tsx
@@ -7,7 +7,7 @@ export const HeartIcon: SvgFC<{ isFull: boolean }> = ({ isFull, ...props }) => (
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            strokeWidth="1.5"
+            strokeWidth="2.5"
         />
     </svg>
 );
diff --git a/storefront/components/Basic/Icon/MenuIcon.tsx b/storefront/components/Basic/Icon/MenuIcon.tsx
@@ -1,7 +1,7 @@
 export const MenuIcon: SvgFC = (props) => (
     <svg {...props} viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
         <g fill="none">
-            <path d="M0 6H15.996 0" stroke="currentColor" />
+            <path d="M0 6H15.996 0" stroke="currentColor" strokeWidth="2" />
             <path d="M16 0v2H0V0zM15.996 10v2H0v-2z" fill="currentColor" />
         </g>
     </svg>

diff --git a/storefront/components/Basic/LabelLink/LabelLink.tsx b/storefront/components/Basic/LabelLink/LabelLink.tsx
@@ -0,0 +1,67 @@
+import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
+import { ReactElement } from 'react';
+import { PageType } from 'store/slices/createPageLoadingStateSlice';
+import { twJoin } from 'tailwind-merge';
+
+type LabelLinkProps = {
+    isDisabled?: boolean;
+    isActive?: boolean;
+    onClick?: () => void;
+} & (
+    | {
+          href: string;
+          type: PageType | undefined;
+          render?: never;
+      }
+    | ({
+          href?: never;
+          type?: never;
+      } & (
+          | {
+                render: (input: JSX.Element) => ReactElement<any, any> | null;
+            }
+          | {
+                render?: never;
+            }
+      ))
+);
+
+export const LabelLink: FC<LabelLinkProps> = ({
+    href,
+    type,
+    children,
+    isDisabled,
+    isActive,
+    className,
+    render,
+    onClick,
+}) => {
+    const labelLinkTwClassName = twJoin(
+        'px-4 py-1 rounded-full no-underline transition-all flex justify-center items-center',
+        'bg-labelLinkBackground text-labelLinkText border-labelLinkBorder',
+        'hover:bg-labelLinkBackgroundHovered hover:text-labelLinkTextHovered hover:border-labelLinkBorderHovered hover:no-underline hover:cursor-pointer',
+        isDisabled && 'bg-labelLinkBackgroundDisabled text-labelLinkTextDisabled border-labelLinkBorderDisabled',
+        isActive && 'bg-labelLinkBackgroundActive text-labelLinkTextActive border-labelLinkBorderActive',
+        className,
+    );
+
+    if (href) {
+        return (
+            <ExtendedNextLink className={labelLinkTwClassName} href={href} type={type}>
+                {children}
+            </ExtendedNextLink>
+        );
+    }
+
+    const content = (
+        <div className={labelLinkTwClassName} onClick={onClick}>
+            {children}
+        </div>
+    );
+
+    if (render) {
+        return render(content);
+    }
+
+    return content;
+};
diff --git a/storefront/components/Basic/Link/Link.tsx b/storefront/components/Basic/Link/Link.tsx
@@ -1,5 +1,5 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
-import { Button } from 'components/Forms/Button/Button';
+import { Button, ButtonBaseProps } from 'components/Forms/Button/Button';
 import { TIDs } from 'cypress/tids';
 import { AnchorHTMLAttributes } from 'react';
 import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault';
@@ -13,18 +13,36 @@ type NativePropsAnchor = ExtractNativePropsFromDefault<
 
 type LinkProps = NativePropsAnchor & {
     isExternal?: boolean;
-    isButton?: boolean;
     size?: 'small';
-};
+} & (
+        | {
+              isButton: true;
+              buttonVariant?: ButtonBaseProps['variant'];
+          }
+        | {
+              isButton?: false;
+              buttonVariant?: never;
+          }
+    );
 
 const linkPlaceholderTwClassSegments = [
-    'inline-flex cursor-pointer items-center text-skyBlue outline-none hover:text-primary',
+    'inline-flex cursor-pointer items-center text-link outline-none hover:text-linkHovered',
     'underline hover:underline',
 ];
 
 export const linkPlaceholderTwClass = linkPlaceholderTwClassSegments.join(' ');
 
-export const Link: FC<LinkProps> = ({ isExternal, isButton, children, href, rel, target, className, tid }) => {
+export const Link: FC<LinkProps> = ({
+    isExternal,
+    isButton,
+    children,
+    href,
+    rel,
+    target,
+    className,
+    tid,
+    buttonVariant,
+}) => {
     const classNameTwClass = twMergeCustom(
         linkPlaceholderTwClassSegments[0],
         isButton ? 'no-underline hover:no-underline' : linkPlaceholderTwClassSegments[1],
@@ -38,7 +56,13 @@ export const Link: FC<LinkProps> = ({ isExternal, isButton, children, href, rel,
         tid: tid ?? TIDs.basic_link,
     };
 
-    const content = isButton ? <Button className={className}>{children}</Button> : children;
+    const content = isButton ? (
+        <Button className={className} variant={buttonVariant}>
+            {children}
+        </Button>
+    ) : (
+        children
+    );
 
     if (isExternal) {
         return <a {...props}>{content}</a>;

diff --git a/storefront/components/Basic/Loader/LoaderWithOverlay.tsx b/storefront/components/Basic/Loader/LoaderWithOverlay.tsx
@@ -3,7 +3,7 @@ import { TIDs } from 'cypress/tids';
 
 export const LoaderWithOverlay: FC = ({ className }) => (
     <div
-        className="absolute inset-0 z-overlay flex h-full w-full items-center justify-center bg-graySlate opacity-50"
+        className="absolute inset-0 z-overlay flex h-full w-full items-center justify-center bg-overlay"
         tid={TIDs.loader_overlay}
     >
         <SpinnerIcon className={className} />

diff --git a/storefront/components/Basic/ModalGallery/ModalGallery.tsx b/storefront/components/Basic/ModalGallery/ModalGallery.tsx
@@ -66,10 +66,10 @@ export const ModalGallery: FC<ModalGalleryProps> = ({ initialIndex, items, galle
     });
 
     return (
-        <div className="fixed inset-0 flex select-none flex-col bg-dark p-2 z-maximum" onClick={onCloseModal}>
+        <div className="fixed inset-0 flex select-none flex-col bg-backgroundDark p-2 z-[10000]" onClick={onCloseModal}>
             <div className="flex w-full flex-1 flex-col justify-center">
                 <div className="relative my-auto flex max-h-[80dvh] flex-1 items-center justify-center" {...handlers}>
-                    <SpinnerIcon className="absolute -z-above w-16 text-white opacity-50" />
+                    <SpinnerIcon className="absolute -z-above w-16 text-textInverted opacity-50" />
 
                     {isImage && (
                         <Image
@@ -96,7 +96,7 @@ export const ModalGallery: FC<ModalGalleryProps> = ({ initialIndex, items, galle
                 </div>
 
                 {isImage && selectedGalleryItem.name && (
-                    <div className="mt-2 text-center text-skyBlue">{selectedGalleryItem.name}</div>
+                    <div className="mt-2 text-center text-textInverted">{selectedGalleryItem.name}</div>
                 )}
 
                 <div className="mt-4 flex items-center justify-center gap-8">
@@ -128,7 +128,7 @@ const FloatingButton: FC<FloatingButtonProps> = ({ className, children, onClick,
     <button
         type="button"
         className={twMergeCustom(
-            'inline-flex items-center justify-center rounded-full bg-white p-2 text-black opacity-20 transition-opacity hover:opacity-100',
+            'inline-flex items-center justify-center rounded-full bg-backgroundAccentLess p-2 text-text transition-all hover:text-textAccent hover:cursor-pointer',
             className,
         )}
         onClick={(e) => {
@@ -150,7 +150,7 @@ const ButtonArrow: FC<FloatingButtonProps & { position: 'left' | 'right' }> = ({
     return (
         <FloatingButton className={twJoin('', isLeft ? 'left-2' : 'right-2')} {...floatingButtonProps}>
             <svg
-                className={twJoin('text-red-500 h-8 w-8', isLeft && 'rotate-180')}
+                className={twJoin('h-8 w-8', isLeft && 'rotate-180')}
                 fill="none"
                 stroke="currentColor"
                 strokeLinecap="round"

diff --git a/storefront/components/Basic/ModalGallery/ModalGalleryCarousel.tsx b/storefront/components/Basic/ModalGallery/ModalGalleryCarousel.tsx
@@ -61,7 +61,7 @@ export const ModalGalleryCarousel: FC<ModalGalleryCarouselProps> = ({
                                     width={80}
                                 />
 
-                                <PlayIcon className="absolute top-1/2 left-1/2 flex h-8 w-8 -translate-y-1/2 -translate-x-1/2 items-center justify-center rounded-full bg-dark bg-opacity-50 text-white" />
+                                <PlayIcon className="absolute top-1/2 left-1/2 flex h-8 w-8 -translate-y-1/2 -translate-x-1/2 items-center justify-center rounded-full bg-overlay text-textInverted" />
                             </div>
                         )}
                     </li>

diff --git a/storefront/components/Basic/NotImplementedYet/NotImplementedYet.tsx b/storefront/components/Basic/NotImplementedYet/NotImplementedYet.tsx
@@ -11,10 +11,10 @@ export const notImplementedYetHandler = (e: SyntheticEvent): void => {
 };
 
 const notImplementedTagTwClass =
-    'whitespace-nowrap rounded-sm bg-red p-1 text-center text-xs font-normal text-white opacity-100';
+    'whitespace-nowrap rounded-sm bg-backgroundError p-1 text-center text-xs font-normal text-textInverted';
 const notImplementedTagPositionedTwClass =
-    'whitespace-nowrap rounded-sm bg-red p-1 text-center text-xs font-normal text-white opacity-100 absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2';
-const notImplementedBorderTwClass = 'border border-dashed border-red';
+    'whitespace-nowrap rounded-sm bg-backgroundError p-1 text-center text-xs font-normal text-textInverted absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2';
+const notImplementedBorderTwClass = 'border border-dashed border-borderAccentError';
 
 export const NotImplementedYetWrapper: FC = ({ children }) => {
     return (

diff --git a/storefront/components/Basic/Overlay/Overlay.tsx b/storefront/components/Basic/Overlay/Overlay.tsx
@@ -19,7 +19,7 @@ export const Overlay: FC<OverlayProps> = ({ onClick, isActive, isHiddenOnDesktop
                     initial="hidden"
                     variants={fadeAnimation}
                     className={twMergeCustom(
-                        'fixed inset-0 z-overlay flex cursor-pointer items-center justify-center bg-black bg-opacity-60',
+                        'fixed inset-0 z-overlay flex cursor-pointer items-center justify-center bg-overlay',
                         isHiddenOnDesktop && 'vl:hidden',
                     )}
                     onClick={onClick}

diff --git a/storefront/components/Basic/RangeSlider/RangeSlider.tsx b/storefront/components/Basic/RangeSlider/RangeSlider.tsx
@@ -151,6 +151,13 @@ export const RangeSlider: FC<RangeSliderProps> = ({
         }
     }, [getPercent, maxValueThumb, minValueThumb]);
 
+    let rangeBgClass = 'bg-inputBorder';
+    if (minValueThumb !== min || maxValueThumb !== max) {
+        rangeBgClass = 'bg-inputBorderActive';
+    } else if (isDisabled) {
+        rangeBgClass = 'bg-inputBorderDisabled';
+    }
+
     return (
         <div className="relative mb-10 -mt-5 flex h-12 w-full items-center justify-center p-2">
             <RangeSliderThumb
@@ -180,12 +187,9 @@ export const RangeSlider: FC<RangeSliderProps> = ({
                 onTouchEnd={handleMaxValueThumbCallback}
             />
             <div className="relative w-full">
-                <div className="absolute z-above h-1 w-full rounded bg-graySlate" />
-                <div
-                    className={twJoin('absolute z-[2] h-1 rounded', isDisabled ? 'bg-graySlate' : 'bg-primary')}
-                    ref={range}
-                />
-                <div className="absolute -left-2 mt-5 w-20 text-xs text-black">
+                <div className="absolute z-above h-1 w-full rounded bg-inputBorderDisabled" />
+                <div className={twJoin('absolute z-[2] h-1 rounded', rangeBgClass)} ref={range} />
+                <div className="absolute -left-2 mt-5 w-20 text-xs">
                     <TextInput
                         disabled={isDisabled}
                         id="basic-rangeslider-left-value"
@@ -198,7 +202,7 @@ export const RangeSlider: FC<RangeSliderProps> = ({
                         onKeyDown={onEnterKeyDownHandler}
                     />
                 </div>
-                <div className="absolute -right-2 mt-5 w-20 text-xs text-dark">
+                <div className="absolute -right-2 mt-5 w-20 text-xs">
                     <TextInput
                         disabled={isDisabled}
                         id="basic-rangeslider-right-value"
@@ -228,6 +232,16 @@ const RangeSliderThumb: FC<RangeSliderThumbProps> = ({ isActive, disabled, ...pr
     const msTwClass =
         '[&::-ms-track]:pointer-events-none [&::-ms-fill-lower] [&::-ms-thumb]:z-[3] [&::-ms-thumb]:-my-2 [&::-ms-thumb]:h-4 [&::-ms-thumb]:w-4 [&::-ms-thumb]:cursor-pointer [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-none [&::-ms-fill-upper]:pointer-events-none';
 
+    let bgClass =
+        '[&::-moz-range-thumb]:bg-inputBorder [&::-ms-thumb]:bg-inputBorder [&::-webkit-slider-thumb]:bg-inputBorder';
+    if (isActive) {
+        bgClass =
+            '[&::-moz-range-thumb]:bg-inputBorderActive [&::-ms-thumb]:bg-inputBorderActive [&::-webkit-slider-thumb]:bg-inputBorderActive';
+    } else if (disabled) {
+        bgClass =
+            '[&::-moz-range-thumb]:bg-inputBorderDisabled [&::-ms-thumb]:bg-inputBorderDisabled [&::-webkit-slider-thumb]:bg-inputBorderDisabled';
+    }
+
     return (
         <input
             disabled={disabled}
@@ -237,9 +251,7 @@ const RangeSliderThumb: FC<RangeSliderThumbProps> = ({ isActive, disabled, ...pr
                 webkitTwClass,
                 mozTwClass,
                 msTwClass,
-                isActive
-                    ? '[&::-moz-range-thumb]:bg-secondary [&::-ms-thumb]:bg-secondary [&::-webkit-slider-thumb]:bg-secondary'
-                    : '[&::-moz-range-thumb]:bg-graySlate [&::-ms-thumb]:bg-graySlate [&::-webkit-slider-thumb]:bg-graySlate',
+                bgClass,
                 disabled &&
                     '[&::-moz-range-thumb]:cursor-not-allowed [&::-ms-thumb]:cursor-not-allowed [&::-webkit-slider-thumb]:cursor-not-allowed',
             )}