@cntrl-site/sdk-nextjs 0.12.8 → 0.13.0

package/src/components/Item.tsx

@@ -18,12 +18,14 @@ import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
-import { getItemTopStyle, useItemPosition } from './useItemPosition';
+import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
+import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles';
+import { getItemTopStyle } from '../utils/getItemTopStyle';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -52,7 +54,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const sectionHeight = useSectionHeightData(sectionId);
   const layout = useCurrentLayout();
   const { width, height } = useItemDimensions(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden];
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
   const isInitialRef = useRef(true);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
@@ -100,12 +102,11 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
-
           return (`
             .item-${item.id} {
-              position: ${sticky ? 'sticky' : 'absolute'};xw
+              position: ${sticky ? 'sticky' : 'absolute'};
               width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === SizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
@@ -113,7 +114,9 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
               --webkit-backface-visibility: hidden;
+              cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id} {
               position: absolute;
@@ -124,6 +127,13 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
+              transition: ${getTransitions(['left', 'top'], hoverParams)};
+            }
+            .item-${item.id}:hover {
+              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)}
+            }
+            .item-wrapper-${item.id}:hover {
+              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)}
             }
           `);
       })}

package/src/components/Section.tsx

@@ -49,7 +49,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         className={`section-${section.id}`}
         id={section.name}
         style={{
-          backgroundColor: backgroundColor
+          backgroundColor: backgroundColor.toCss()
         }}
         ref={sectionRef}
       >
@@ -65,6 +65,11 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         ))
       }
       ${getSectionVisibilityStyles()}
+      @supports not (color: oklch(42% 0.3 90 / 1)) {
+        .section-${section.id} {
+          background-color: ${backgroundColor.fmt('rgba')};
+        }
+      }
     `}</JSXStyle>
     </>
   );

package/src/components/items/CustomItem.tsx

@@ -1,11 +1,29 @@
-import { TCustomItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, TCustomItem } from '@cntrl-site/sdk';
 import { FC } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import JSXStyle from 'styled-jsx/style';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item }) => {
   const sdk = useCntrlContext();
+  const { layouts } = useCntrlContext();
   const component = sdk.customItems.get(item.commonParams.name);
   if (!component) return null;
-  return component({});
+  return (
+    <>
+      <div className={`custom-component-${item.id}`}>{component({})}</div>
+      <JSXStyle id={item.id}>
+        {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .custom-component-${item.id} {
+              transition: ${getTransitions<ArticleItemType.Custom>(['angle'], hoverParams)};
+            }
+            .custom-component-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Custom>(['angle'], hoverParams)}
+            }
+          `);
+        })}`}
+      </JSXStyle>
+    </>);
 };

package/src/components/items/ImageItem.tsx

@@ -1,31 +1,40 @@
 import { FC, useId, useMemo } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { CntrlColor, TImageItem } from '@cntrl-site/sdk';
+import { ArticleItemType, CntrlColor, getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
   const id = useId();
+  const { layouts } = useCntrlContext();
   const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`image-wrapper-${item.id}`}
+        <div
+          className={`image-wrapper-${item.id}`}
           style={{
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             opacity: `${opacity}`,
-            borderColor: `${borderColor}`,
+            borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`
           }}
         >
           <img className="image" src={item.commonParams.url} />
         </div>
         <JSXStyle id={id}>{`
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .image-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;
@@ -42,6 +51,16 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
             object-fit: cover;
             pointer-events: none;
           }
+          ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+            return (`
+              .image-wrapper-${item.id} {
+                transition: ${getTransitions<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+              }
+              .image-wrapper-${item.id}:hover {
+                ${getHoverStyles<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+              }
+            `);
+         })}
       `}</JSXStyle>
       </>
     </LinkWrapper>

package/src/components/items/RectangleItem.tsx

@@ -1,13 +1,16 @@
 import { FC, useId, useMemo } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
+import { TRectangleItem, CntrlColor, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }) => {
   const id = useId();
+  const { layouts } = useCntrlContext();
   const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
@@ -16,7 +19,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div  className={`rectangle-${item.id}`}
+        <div className={`rectangle-${item.id}`}
           style={{
             backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
@@ -26,12 +29,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
           }}
         />
         <JSXStyle id={id}>{`
-        @supports (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('oklch')};
-            border-color: ${borderColor.fmt('oklch')};
-          }
-        }
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};
@@ -45,6 +42,16 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
           border-style: solid;
           box-sizing: border-box;
         }
+        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .rectangle-${item.id} {
+              transition: ${getTransitions<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+            }
+            .rectangle-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+            }
+          `);
+        })}
       `}</JSXStyle>
       </>
     </LinkWrapper>

package/src/components/items/RichTextItem.tsx

@@ -1,14 +1,18 @@
-import { FC, useEffect, useState } from 'react';
-import { TRichTextItem } from '@cntrl-site/sdk';
+import { FC, useEffect, useId, useState } from 'react';
+import { ArticleItemType, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
 import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles, preset] = useRichTextItem(item);
+  const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const angle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
   const className = preset ? `cntrl-preset-${preset.id}` : undefined;
 
   useEffect(() => {
@@ -27,15 +31,25 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     <>
       <div
         ref={setRef}
-        className={className}
+        className={`${className} rich-text-wrapper-${item.id}`}
         style={{
           transform: `rotate(${angle}deg)`
         }}
       >
         {content}
       </div>
-      <JSXStyle id={item.id}>
+      <JSXStyle id={id}>
         {styles}
+        {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .rich-text-wrapper-${item.id} {
+              transition: ${getTransitions<ArticleItemType.RichText>(['angle'], hoverParams)};
+            }
+            .rich-text-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.RichText>(['angle'], hoverParams)}
+            }
+          `);
+        })}`}
       </JSXStyle>
     </>
   );

package/src/components/items/VideoItem.tsx

@@ -1,33 +1,42 @@
 import { FC, useId, useMemo } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { CntrlColor, TVideoItem } from '@cntrl-site/sdk';
+import { ArticleItemType, CntrlColor, getLayoutStyles, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
   const id = useId();
+  const { layouts } = useCntrlContext();
   const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`video-wrapper-${item.id}`}
-         style={{
-           borderRadius: `${radius * 100}vw`,
-           borderWidth: `${strokeWidth * 100}vw`,
-           opacity: `${opacity}`,
-           borderColor: `${borderColor}`,
-           transform: `rotate(${angle}deg)`
-         }}
+      <div
+        className={`video-wrapper-${item.id}`}
+        style={{
+          borderRadius: `${radius * 100}vw`,
+          borderWidth: `${strokeWidth * 100}vw`,
+          opacity: `${opacity}`,
+          borderColor: `${borderColor.toCss()}`,
+          transform: `rotate(${angle}deg)`
+        }}
       >
         <video autoPlay muted loop playsInline className="video">
           <source src={item.commonParams.url} />
         </video>
       </div>
       <JSXStyle id={id}>{`
-       .video-wrapper-${item.id} {
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .video-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;
@@ -44,6 +53,16 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
           object-fit: cover;
           pointer-events: none;
         }
+        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .video-wrapper-${item.id} {
+              transition: ${getTransitions<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+            }
+            .video-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+            }
+          `);
+        })}
     `}</JSXStyle>
     </LinkWrapper>
   );

package/src/components/items/VimeoEmbed.tsx

@@ -1,20 +1,34 @@
-import { FC, useId } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
+import Player from '@vimeo/player';
 import JSXStyle from 'styled-jsx/style';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
+import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
+  const { layouts } = useCntrlContext();
+  const layout = useCurrentLayout()
   const { radius } = useEmbedVideoItem(item, sectionId);
+  const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
+  const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
+  const isAutoPlayOnHover = useMemo(() => {
+    const layoutHoverStates = item.state.hover[layout];
+    if (!layoutHoverStates) return false;
+    return layoutHoverStates.autoplay === true;
+  }, [layout, item]);
   const angle = useItemAngle(item, sectionId);
   const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
-    validURL.searchParams.append('autoplay', !controls ? 'true' : String(autoplay));
+    validURL.searchParams.append('autoplay', String(autoplay));
     validURL.searchParams.append('muted', String(muted));
     validURL.searchParams.append('loop', String(loop));
     validURL.searchParams.append('pip', String(pictureInPicture));
@@ -29,33 +43,52 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   return (
     <LinkWrapper url={item.link?.url}>
-        <div className={`embed-video-wrapper-${item.id}`}
-          style={{
-            borderRadius: `${radius * 100}vw`,
-            transform: `rotate(${angle}deg)`
-          }}
-        >
-          <iframe
-            className="embedVideo"
-            src={validUrl || ''}
-            allow="autoplay; fullscreen; picture-in-picture;"
-            allowFullScreen
-          />
-        </div>
-        <JSXStyle id={id}>{`
-        .embed-video-wrapper-${item.id} {
-          position: absolute;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-        }
-        .embedVideo {
-          width: 100%;
-          height: 100%;
-          z-index: 1;
-          border: none;
-        }
-      `}</JSXStyle>
+      <div className={`embed-video-wrapper-${item.id}`}
+        style={{
+          borderRadius: `${radius * 100}vw`,
+          transform: `rotate(${angle}deg)`
+        }}
+        onMouseEnter={() => {
+          if (!vimeoPlayer || !isAutoPlayOnHover) return;
+          vimeoPlayer.play();
+        }}
+        onMouseLeave={() =>{
+          if (!vimeoPlayer || !isAutoPlayOnHover) return;
+          vimeoPlayer.pause();
+        }}
+      >
+        <iframe
+          ref={setIframeRef}
+          className="embedVideo"
+          src={validUrl || ''}
+          allow="autoplay; fullscreen; picture-in-picture;"
+          allowFullScreen
+        />
+      </div>
+      <JSXStyle id={id}>{`
+      .embed-video-wrapper-${item.id} {
+        position: absolute;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+      .embedVideo {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+      }
+      ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+        return (`
+          .embed-video-wrapper-${item.id} {
+            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'radius'], hoverParams)};
+          }
+          .embed-video-wrapper-${item.id}:hover {
+            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'radius'], hoverParams)}
+          }
+        `);
+      })}
+    `}</JSXStyle>
     </LinkWrapper>
   );
 };

package/src/components/items/YoutubeEmbed.tsx

@@ -6,9 +6,13 @@ import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
+import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
+  const { layouts } = useCntrlContext();
   const { autoplay, controls, url } = item.commonParams;
   const { radius } = useEmbedVideoItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
@@ -18,7 +22,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     const id = getYoutubeId(newUrl);
     const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
     validUrl.searchParams.append('controls', `${ Number(controls) }`);
-    validUrl.searchParams.append('autoplay', !controls ? 'true' : `${ Number(autoplay) }`);
+    validUrl.searchParams.append('autoplay', `${ Number(autoplay) }`);
     validUrl.searchParams.append('mute', `${ Number(autoplay) }`);
 
     return validUrl.href;
@@ -53,6 +57,16 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           z-index: 1;
           border: none;
         }
+        ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
+          return (`
+            .embed-youtube-video-wrapper-${item.id} {
+              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'radius'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'radius'], hoverParams)}
+            }
+          `);
+      })}
       `}</JSXStyle>
     </LinkWrapper>
   )

package/src/components/useItemPosition.ts

@@ -1,6 +1,7 @@
 import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
+import { getItemTopStyle } from '../utils/getItemTopStyle';
 
 export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
   const layoutId = useCurrentLayout();
@@ -17,17 +18,4 @@ export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
   };
 };
 
-export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}
-
 

package/src/components/useSectionColor.ts

@@ -3,12 +3,16 @@ import { useMemo } from 'react';
 import { CntrlColor } from '@cntrl-site/sdk';
 
 type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'transparent';
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): string => {
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
   const layoutId = useCurrentLayout();
    return useMemo(() => {
      const layoutColor = colorData[layoutId];
-     return !layoutColor ? DEFAULT_COLOR : CntrlColor.parse(layoutColor).toCss();
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
    }, []);
 };

package/src/utils/HoverStyles/HoverStyles.ts

@@ -0,0 +1,74 @@
+import { THoverParams, ArticleItemType, CntrlColor, AnchorSide, TItemHoverState } from '@cntrl-site/sdk';
+import { getItemTopStyle } from '../getItemTopStyle';
+
+type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;
+type HoverParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
+type ItemHoverParams = Omit<UnionToIntersection<TItemHoverState>, 'autoplay'>;
+
+const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> = {
+  'width': (width: number) => `width: ${width * 100}vw !important;`,
+  'height': (height: number) => `height: ${height * 100}vw !important;`,
+  'top': (top: number, anchorSide?: AnchorSide) => `top: ${getItemTopStyle(top, anchorSide)} !important;`,
+  'left': (left: number) => `left: ${left * 100}vw !important;`,
+  'scale': (scale: number) => `transform: scale(${scale}) !important;`,
+  'angle': (angle: number) => `transform: rotate(${angle}deg) !important;`,
+  'opacity': (opacity: number) => `opacity: ${opacity} !important;`,
+  'radius': (radius: number) => `border-radius: ${radius * 100}vw !important;`,
+  'strokeWidth': (strokeWidth: number) => `border-width: ${strokeWidth * 100}vw !important;`,
+  'strokeColor': (strokeColor: string) => `border-color: ${CntrlColor.parse(strokeColor).toCss()} !important;`,
+  'fillColor': (fillColor: string) => `background-color: ${CntrlColor.parse(fillColor).toCss()} !important;`,
+};
+
+const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
+  'width': 'width',
+  'height': 'height',
+  'top': 'top',
+  'left': 'left',
+  'scale': 'transform',
+  'angle': 'transform',
+  'opacity': 'opacity',
+  'radius': 'border-radius',
+  'strokeWidth': 'border-width',
+  'strokeColor': 'border-color',
+  'fillColor': 'background-color'
+};
+
+export function getTransitions<T extends ArticleItemType>(
+  values: Array<keyof ItemHoverParams>,
+  hover?: ItemHoverParams
+): string {
+  if (!hover) return 'unset';
+  const transitionValues = values.reduce<string[]>((acc, valueName) => {
+    if (valueName in hover && hover[valueName] !== undefined) {
+      const hoverProperties = hover[valueName] as THoverParams<string | number>;
+      return [
+        ...acc,
+        `${CSSPropertyNameMap[valueName]} ${hoverProperties!.duration}ms ${hoverProperties!.timing} ${hoverProperties!.delay}ms`
+      ];
+    }
+    return acc;
+  }, []);
+  if (!transitionValues.length) return 'unset';
+  return transitionValues.join(', ');
+}
+
+export function getHoverStyles<T extends ArticleItemType>(
+  values: Array<keyof ItemHoverParams>,
+  hover?: ItemHoverParams,
+  anchorSide?: AnchorSide
+): string {
+  if (!hover) return '';
+  const hoverValues = values.reduce<string[]>((acc, valueName) => {
+    if (valueName in hover && hover[valueName] !== undefined) {
+      const hoverProperties = hover[valueName] as THoverParams<string | number>;
+      return [
+        ...acc,
+        hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
+      ];
+    }
+    return acc;
+  }, []);
+  if (!hoverValues.length) return '';
+  return hoverValues.join('\n');
+}
+

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -134,6 +134,7 @@ export class RichTextConverter {
             if (!entitiesGroup.stylesGroup) continue;
             for (const styleGroup of entitiesGroup.stylesGroup) {
               const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+              const color = styleGroup.styles.find(s => s.name === 'COLOR');
               if (lineHeight?.value) {
                 currentLineHeight[item.layout] = lineHeight.value;
               }
@@ -142,6 +143,15 @@ export class RichTextConverter {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
                 }
               `);
+              if (color) {
+                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${CntrlColor.parse(getResolvedValue(color.value, 'COLOR')!).fmt('rgba')};
+                  }
+                }
+              `);
+              }
             }
           }
         }