@cntrl-site/sdk-nextjs 0.5.0 → 0.6.0

package/lib/common/useCurrentLayout.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const useCurrentLayout = () => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const [initialLayout] = layouts;
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutRanges = (0, react_1.useMemo)(() => {
         const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
@@ -25,7 +24,7 @@ const useCurrentLayout = () => {
     const getCurrentLayout = (0, react_1.useCallback)((articleWidth) => {
         return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end).layoutId;
     }, [layoutRanges]);
-    const [layoutId, setLayoutId] = (0, react_1.useState)(getCurrentLayout(isServer() ? 0 : window.innerWidth));
+    const [layoutId, setLayoutId] = (0, react_1.useState)(getCurrentLayout(0));
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
@@ -37,6 +36,3 @@ const useCurrentLayout = () => {
     return layoutId;
 };
 exports.useCurrentLayout = useCurrentLayout;
-function isServer() {
-    return typeof window === 'undefined';
-}

package/lib/common/useKeyframeValue.js

@@ -38,6 +38,9 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         }));
         return new Animator_1.Animator(animationData);
     }, [keyframes, layoutId]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedValue(paramValue);
+    }, [paramValue]);
     (0, react_1.useEffect)(() => {
         if (!animator || !articleRectObserver)
             return;

package/lib/components/Item.js

@@ -31,7 +31,7 @@ const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const position = (0, useItemPosition_1.useItemPosition)(item);
-    const ref = (0, react_1.useRef)(null);
+    const [ref, setRef] = (0, react_1.useState)(null);
     const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
     const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
@@ -46,11 +46,11 @@ const Item = ({ item }) => {
         isInitialRef.current = false;
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!ref.current)
+        if (!ref)
             return;
-        const offsetParent = (0, castObject_1.castObject)(ref.current.offsetParent, HTMLElement);
+        const offsetParent = (0, castObject_1.castObject)(ref.offsetParent, HTMLElement);
         setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-    }, []);
+    }, [ref]);
     const styles = {
         transform: `rotate(${angle}deg)`,
         left: `${position.left * 100}vw`,
@@ -58,7 +58,7 @@ const Item = ({ item }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: ref, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;

package/lib/components/Section.js

@@ -4,8 +4,10 @@ exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useSectionColor_1 = require("./useSectionColor");
 const Section = ({ section, children }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -20,16 +22,14 @@ const Section = ({ section, children }) => {
           }`;
         }, '');
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, style: {
+                    backgroundColor: backgroundColor
+                }, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
           }`))}
-      ${(0, sdk_1.getLayoutStyles)(layouts, [section.color], ([color]) => (`
-         .section-${section.id} {
-            background-color: ${color ? color : 'transparent'};
-          }`))}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };

package/lib/components/items/ImageItem.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const ImageItem = ({ item }) => {
     const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
-                        borderColor: `${strokeColor}`
+                        borderColor: `${borderColor}`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
          .image-wrapper-${item.id} {
             position: absolute;

package/lib/components/items/RectangleItem.js

@@ -2,15 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const RectangleItem = ({ item }) => {
     const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
+    const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
-                        backgroundColor: `${fillColor}`,
+                        backgroundColor: `${backgroundColor}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${strokeColor}`
+                        borderColor: `${borderColor}`
                     } }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
          .rectangle-${item.id} {
             position: absolute;

package/lib/components/items/VideoItem.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const VideoItem = ({ item }) => {
     const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
-                    borderColor: `${strokeColor}`
+                    borderColor: `${borderColor}`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
        .video-wrapper-${item.id} {
           position: absolute;

package/lib/components/items/useItemSticky.js

@@ -16,7 +16,7 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
-    }, [top, stickyManager]);
+    }, [top, stickyManager, parentOffsetTop]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/lib/components/items/useRectangleItem.js

@@ -23,13 +23,13 @@ const useRectangleItem = (item) => {
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
-    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color);
+    }, (animator, scroll, value) => animator.getColor({ color: value }, scroll).color, [layoutId]);
     const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return defaultColor;
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
-    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color);
+    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, [layoutId]);
     return { fillColor, strokeWidth, radius, strokeColor };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/components/useSectionColor.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSectionColor = void 0;
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
+const DEFAULT_COLOR = 'transparent';
+const useSectionColor = (colorData) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    return (0, react_1.useMemo)(() => {
+        const layoutColor = colorData[layoutId];
+        return !layoutColor ? DEFAULT_COLOR : sdk_1.CntrlColor.parse(layoutColor).toCss();
+    }, []);
+};
+exports.useSectionColor = useSectionColor;

package/lib/utils/Animator/Animator.js

@@ -60,7 +60,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            color: this.getRgba(start, end, pos)
+            color: this.getRangeColor(start, end, pos)
         };
     }
     getBorderColor(values, pos) {
@@ -75,7 +75,7 @@ class Animator {
         }
         const { start, end } = this.getStartEnd(pos, keyframes);
         return {
-            color: this.getRgba(start, end, pos)
+            color: this.getRangeColor(start, end, pos)
         };
     }
     getRadius(values, pos) {
@@ -150,25 +150,15 @@ class Animator {
             Animator.pushKeyframeToMap(keyframe, this.keyframesMap);
         }
     }
-    getRgba(start, end, position) {
-        const [startR, startG, startB, startA] = parseRgba(start.value.color);
-        const [endR, endG, endB, endA] = parseRgba(end.value.color);
-        const r = rangeMap(position, start.position, end.position, startR, endR, true);
-        const g = rangeMap(position, start.position, end.position, startG, endG, true);
-        const b = rangeMap(position, start.position, end.position, startB, endB, true);
-        const a = rangeMap(position, start.position, end.position, startA, endA, true);
-        return `rgba(${r},${g},${b},${a})`;
+    getRangeColor(start, end, position) {
+        const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
+        const startColor = sdk_1.CntrlColor.parse(start.value.color);
+        const endColor = sdk_1.CntrlColor.parse(end.value.color);
+        const mixedColor = startColor.mix(endColor, rangeAmount);
+        return mixedColor.fmt('oklch');
     }
 }
 exports.Animator = Animator;
-const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
-function parseRgba(color) {
-    const match = reRgba.exec(color);
-    if (!match)
-        return [0, 0, 0, 1];
-    const [, r, g, b, a] = match;
-    return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
-}
 function createKeyframesMap() {
     return {
         [sdk_1.KeyframeType.Dimensions]: [],

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -187,7 +187,7 @@ class RichTextConverter {
     static fromDraftToInline(draftStyle) {
         const { value, name } = draftStyle;
         const map = {
-            'COLOR': { 'color': value },
+            'COLOR': { 'color': getResolvedValue(value, name) },
             'TYPEFACE': { 'font-family': `${value}` },
             'FONTSTYLE': value ? { ...exports.FontStyles[value] } : {},
             'FONTWEIGHT': { 'font-weight': value },
@@ -218,3 +218,8 @@ function groupBy(items, getKey) {
     }
     return groups;
 }
+function getResolvedValue(value, name) {
+    if (name !== 'COLOR')
+        return value;
+    return value ? sdk_1.CntrlColor.parse(value).toCss() : value;
+}

package/lib/utils/generateTypePresetStyles/generateTypePresetStyles.js

@@ -19,7 +19,7 @@ ${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
     line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
     letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
     word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
-    color: ${p.layoutParams[l.id].color};
+    color: ${sdk_1.CntrlColor.parse(p.layoutParams[l.id].color).toCss()};
   }
 }`)).join('\n')}`)).join('\n')}`);
     return stylesStr.replace(reEmptyLines, '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.4.3",
+    "@cntrl-site/sdk": "^0.4.4",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/common/useCurrentLayout.ts

@@ -10,7 +10,6 @@ interface LayoutData {
 
 export const useCurrentLayout = () => {
   const { layouts } = useCntrlContext();
-  const [initialLayout] = layouts;
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {
     const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
@@ -29,7 +28,7 @@ export const useCurrentLayout = () => {
   const getCurrentLayout = useCallback((articleWidth: number) => {
     return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)!.layoutId;
   }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(isServer() ? 0 : window.innerWidth));
+  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(0));
 
   useEffect(() => {
     if (!articleRectObserver) return;
@@ -41,7 +40,3 @@ export const useCurrentLayout = () => {
 
   return layoutId;
 };
-
-function isServer(): boolean {
-  return typeof window === 'undefined';
-}

package/src/common/useKeyframeValue.ts

@@ -46,6 +46,10 @@ export const useKeyframeValue = <T>(
     return new Animator(animationData);
   }, [keyframes, layoutId]);
 
+  useEffect(() => {
+    setAdjustedValue(paramValue);
+  }, [paramValue]);
+
   useEffect(() => {
     if (!animator || !articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/components/Item.tsx

@@ -39,7 +39,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item);
   const position = useItemPosition(item);
-  const ref = useRef<HTMLDivElement | null>(null);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [parentOffsetTop, setParentOffsetTop] = useState(0);
   const { top, isFixed } = useItemSticky(position.top, parentOffsetTop, item);
   const { width, height } = useItemDimensions(item);
@@ -57,10 +57,10 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   }, []);
 
   useEffect(() => {
-    if (!ref.current) return;
-    const offsetParent = castObject(ref.current.offsetParent, HTMLElement);
+    if (!ref) return;
+    const offsetParent = castObject(ref.offsetParent, HTMLElement);
     setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-  }, []);
+  }, [ref]);
 
   const styles = {
     transform: `rotate(${angle}deg)`,
@@ -74,7 +74,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     <div
       suppressHydrationWarning={true}
       className={`item-${item.id}`}
-      ref={ref}
+      ref={setRef}
       style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
     >
       <ItemComponent item={item} />

package/src/components/Section.tsx

@@ -1,6 +1,14 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
+import {
+  getLayoutMediaQuery,
+  getLayoutStyles,
+  TArticleSection,
+  TSectionHeight,
+  SectionHeightMode,
+  CntrlColor
+} from '@cntrl-site/sdk';
 import { useCntrlContext } from '../provider/useCntrlContext';
+import { useSectionColor } from './useSectionColor';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -11,6 +19,7 @@ interface Props {
 
 export const Section: FC<Props> = ({ section, children }) => {
   const { layouts } = useCntrlContext();
+  const backgroundColor = useSectionColor(section.color);
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)
@@ -28,7 +37,12 @@ export const Section: FC<Props> = ({ section, children }) => {
 
  return (
     <>
-      <div className={`section-${section.id}`}>
+      <div
+        className={`section-${section.id}`}
+        style={{
+          backgroundColor: backgroundColor
+        }}
+      >
         {children}
       </div>
       <style jsx>{`
@@ -40,13 +54,6 @@ export const Section: FC<Props> = ({ section, children }) => {
           }`
         ))
       }
-      ${
-        getLayoutStyles(layouts, [section.color], ([color]) => (`
-         .section-${section.id} {
-            background-color: ${color ? color : 'transparent'};
-          }`
-        ))
-      }
       ${getSectionVisibilityStyles()}
     `}</style>
     </>

package/src/components/items/ImageItem.tsx

@@ -1,11 +1,12 @@
-import { FC } from 'react';
-import { TImageItem } from '@cntrl-site/sdk';
+import { FC, useMemo } from 'react';
+import { CntrlColor, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
   const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
@@ -14,7 +15,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             opacity: `${opacity}`,
-            borderColor: `${strokeColor}`
+            borderColor: `${borderColor}`
           }}
         >
           <img className="image" src={item.commonParams.url} />

package/src/components/items/RectangleItem.tsx

@@ -1,20 +1,23 @@
-import { FC } from 'react';
-import { TRectangleItem } from '@cntrl-site/sdk';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
   const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
+  const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+
   return (
     <LinkWrapper url={item.link?.url}>
       <>
         <div className={`rectangle-${item.id}`}
           style={{
-            backgroundColor: `${fillColor}`,
+            backgroundColor: `${backgroundColor}`,
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${strokeColor}`
+            borderColor: `${borderColor}`
           }}
         />
         <style jsx>{`

package/src/components/items/VideoItem.tsx

@@ -1,11 +1,12 @@
-import { FC } from 'react';
-import { TVideoItem } from '@cntrl-site/sdk';
+import { FC, useMemo } from 'react';
+import { CntrlColor, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
   const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
       <div className={`video-wrapper-${item.id}`}
@@ -13,7 +14,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
            borderRadius: `${radius * 100}vw`,
            borderWidth: `${strokeWidth * 100}vw`,
            opacity: `${opacity}`,
-           borderColor: `${strokeColor}`
+           borderColor: `${borderColor}`
          }}
       >
         <video autoPlay muted loop playsInline className="video">

package/src/components/items/useFileItem.ts

@@ -1,4 +1,4 @@
-import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { CntrlColor, TImageItem, TVideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 

package/src/components/items/useItemSticky.ts

@@ -19,7 +19,7 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
       top,
       parentOffsetTop
     ));
-  }, [top, stickyManager]);
+  }, [top, stickyManager, parentOffsetTop]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;

package/src/components/items/useRectangleItem.ts

@@ -1,4 +1,4 @@
-import { TRectangleItem } from '@cntrl-site/sdk';
+import { CntrlColor, TRectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
@@ -33,7 +33,8 @@ export const useRectangleItem = (item: TRectangleItem) => {
       const layoutParams = item.layoutParams[layoutId];
       return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getColor({ color: value }, scroll).color
+    (animator, scroll, value) => animator.getColor({ color: value }, scroll).color,
+    [layoutId]
   );
   const strokeColor = useKeyframeValue(
     item,
@@ -42,8 +43,8 @@ export const useRectangleItem = (item: TRectangleItem) => {
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color
+    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    [layoutId]
   );
-
   return { fillColor, strokeWidth, radius, strokeColor };
 };

package/src/components/useSectionColor.ts

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

package/src/utils/Animator/Animator.ts

@@ -1,4 +1,4 @@
-import { KeyframeType, TKeyframeValueMap } from '@cntrl-site/sdk';
+import { KeyframeType, TKeyframeValueMap, CntrlColor } from '@cntrl-site/sdk';
 import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
 
 export interface AnimationData<T extends KeyframeType> {
@@ -84,7 +84,7 @@ export class Animator {
     }
     const { start, end } = this.getStartEnd<KeyframeType.Color>(pos, keyframes);
     return {
-      color: this.getRgba(start, end, pos)
+      color: this.getRangeColor(start, end, pos)
     };
   }
 
@@ -102,7 +102,7 @@ export class Animator {
     }
     const { start, end } = this.getStartEnd<KeyframeType.BorderColor>(pos, keyframes);
     return {
-      color: this.getRgba(start, end, pos)
+      color: this.getRangeColor(start, end, pos)
     };
   }
 
@@ -192,29 +192,19 @@ export class Animator {
     }
   }
 
-  private getRgba(
+  private getRangeColor(
     start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
     end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
     position: number
   ): string {
-    const [startR, startG, startB, startA] = parseRgba(start.value.color);
-    const [endR, endG, endB, endA] = parseRgba(end.value.color);
-    const r = rangeMap(position, start.position, end.position, startR, endR, true);
-    const g = rangeMap(position, start.position, end.position, startG, endG, true);
-    const b = rangeMap(position, start.position, end.position, startB, endB, true);
-    const a = rangeMap(position, start.position, end.position, startA, endA, true);
-    return `rgba(${r},${g},${b},${a})`;
+    const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
+    const startColor = CntrlColor.parse(start.value.color);
+    const endColor = CntrlColor.parse(end.value.color);
+    const mixedColor = startColor.mix(endColor, rangeAmount);
+    return mixedColor.fmt('oklch');
   }
 }
 
-const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
-
-function parseRgba(color: string): [r: number, g: number, b: number, a: number] {
-  const match = reRgba.exec(color);
-  if (!match) return [0, 0, 0, 1];
-  const [, r, g, b, a] = match;
-  return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
-}
 
 function createKeyframesMap(): KeyframesMap {
   return {

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import {
+  CntrlColor,
   getLayoutMediaQuery,
   RichText,
   TextTransform,
@@ -219,7 +220,7 @@ export class RichTextConverter {
   private static fromDraftToInline(draftStyle: Style): string {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
-      'COLOR': { 'color': value },
+      'COLOR': { 'color': getResolvedValue(value, name) },
       'TYPEFACE': { 'font-family': `${value}` },
       'FONTSTYLE': value ? { ...FontStyles[value] } : {},
       'FONTWEIGHT': { 'font-weight': value },
@@ -250,3 +251,8 @@ function groupBy<I>(items: I[], getKey: (item: I) => PropertyKey): Record<Proper
   }
   return groups;
 }
+
+function getResolvedValue(value: string | undefined, name: string) {
+  if (name !== 'COLOR') return value;
+  return value ? CntrlColor.parse(value).toCss() : value;
+}

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.ts

@@ -1,4 +1,4 @@
-import { getLayoutMediaQuery, TLayout, TTypePresets } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, TLayout, TTypePresets, CntrlColor } from '@cntrl-site/sdk';
 
 const reEmptyLines = /^\s*\n/gm;
 
@@ -18,7 +18,7 @@ ${getLayoutMediaQuery(l.id, sorted)} {
     line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
     letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
     word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
-    color: ${p.layoutParams[l.id].color};
+    color: ${CntrlColor.parse(p.layoutParams[l.id].color).toCss()};
   }
 }`)).join('\n')}`)).join('\n')}`);
   return stylesStr.replace(reEmptyLines, '');