@cntrl-site/sdk-nextjs 0.5.1 → 0.7.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

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/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/RichTextItem.js

@@ -5,20 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 //@ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useRichTextItem_1 = require("./useRichTextItem");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const RichTextItem = ({ item }) => {
-    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
-    const preset = item.commonParams.preset
-        ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
-        : null;
-    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
-    return (0, react_1.createElement)(preset?.tag ?? 'div', {
-        className: preset ? `cntrl-preset-${preset.id}` : undefined
-    }, ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] })));
+    const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

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/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/items/useRichTextItem.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItem = void 0;
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const richTextConv = new RichTextConverter_1.RichTextConverter();
+const useRichTextItem = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
+    const presetId = item.layoutParams[layoutId].preset;
+    const preset = presetId
+        ? typePresets?.presets.find(p => p.id === presetId) ?? null
+        : null;
+    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+    return [content, styles, preset];
+};
+exports.useRichTextItem = useRichTextItem;

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

@@ -6,14 +6,14 @@ const binSearchInsertAt_1 = require("../binSearchInsertAt");
 const compare = (lhs, rhs) => lhs.position - rhs.position;
 const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
 class Animator {
+    static pushKeyframeToMap(keyframe, map) {
+        insertBin(map[keyframe.type], keyframe);
+    }
     constructor(keyframes) {
         this.keyframes = keyframes;
         this.keyframesMap = createKeyframesMap();
         this.fillKeyframesMap();
     }
-    static pushKeyframeToMap(keyframe, map) {
-        insertBin(map[keyframe.type], keyframe);
-    }
     getDimensions(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.Dimensions];
         if (!keyframes || !keyframes.length)
@@ -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

@@ -15,11 +15,11 @@ function generateTypePresetStyles(preset, layouts) {
   ${sorted.map(l => (`
 ${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
   .cntrl-preset-${p.id} {
-    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
-    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};
+    font-size: ${p.fontSize / l.exemplary * 100}vw;
+    line-height: ${p.lineHeight / l.exemplary * 100}vw;
+    letter-spacing: ${p.letterSpacing / l.exemplary * 100}vw;
+    word-spacing: ${p.wordSpacing / l.exemplary * 100}vw;
+    color: ${sdk_1.CntrlColor.parse(p.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.1",
+  "version": "0.7.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.6.2",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
@@ -40,7 +40,7 @@
     "@types/react": "^18.0.15",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.5"
   },
   "directories": {
     "lib": "lib"

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/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, useMemo } 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/RichTextItem.tsx

@@ -5,27 +5,19 @@ import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useRichTextItem } from './useRichTextItem';
 
 const richTextConv = new RichTextConverter();
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
-  const { layouts, typePresets } = useCntrlContext();
-  const preset = item.commonParams.preset
-    ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
-    : null;
-  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
-  return createElement(
-    preset?.tag ?? 'div',
-    {
-      className: preset ? `cntrl-preset-${preset.id}` : undefined
-    },
-    (
-      <>
-        {content}
-        <JSXStyle id={item.id}>
-          {styles}
-        </JSXStyle>
-      </>
-    )
+  const [content, styles, preset] = useRichTextItem(item);
+  const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+  return (
+    <>
+      <div className={className}>{content}</div>
+      <JSXStyle id={item.id}>
+        {styles}
+      </JSXStyle>
+    </>
   );
 };

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/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/items/useRichTextItem.ts

@@ -0,0 +1,18 @@
+import { TRichTextItem, TTypePresetEntry } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { ReactNode } from 'react';
+
+const richTextConv = new RichTextConverter();
+
+export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
+  const layoutId = useCurrentLayout();
+  const { layouts, typePresets } = useCntrlContext();
+  const presetId = item.layoutParams[layoutId].preset;
+  const preset = presetId
+    ? typePresets?.presets.find(p => p.id === presetId) ?? null
+    : null;
+  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+  return [content, styles, preset];
+};

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/__mock__/presetMock.ts

@@ -1,28 +1,4 @@
-import { AllowedTags, TTypePresets } from '@cntrl-site/sdk';
-
-const layoutParams = {
-  'desktop': {
-    fontSize: 0.011111,
-    lineHeight: 0.013888,
-    wordSpacing: 0.0006944,
-    letterSpacing: 0.0006944,
-    color: 'rgba(0, 0, 0, 1)'
-  },
-  'tablet': {
-    fontSize: 0.02604,
-    lineHeight: 0.03125,
-    wordSpacing: 0,
-    letterSpacing: 0,
-    color: 'rgba(0, 0, 0, 1)'
-  },
-  'mobile': {
-    fontSize: 0.053333,
-    lineHeight: 0.064,
-    wordSpacing: 0.008,
-    letterSpacing: 0.008,
-    color: 'rgba(0, 0, 0, 1)'
-  }
-};
+import { TTypePresets, TypePresetStatus } from '@cntrl-site/sdk';
 
 export const presetMock: TTypePresets = {
   id: 'presetId',
@@ -33,17 +9,25 @@ export const presetMock: TTypePresets = {
       fontWeight: '400',
       fontStyle: '',
       name: 'Heading',
-      tag: AllowedTags.h1,
-      layoutParams
+      fontSize: 24,
+      lineHeight: 36,
+      wordSpacing: 1,
+      letterSpacing: 1,
+      color: 'rgba(0, 0, 0, 1)',
+      status: TypePresetStatus.Active
     },
     {
       id: 'heading02',
       fontFamily: 'Aeonik',
       fontWeight: '400',
       fontStyle: 'italic',
-      name: 'Heading',
-      tag: AllowedTags.h1,
-      layoutParams
+      name: 'Heading 2',
+      fontSize: 24,
+      lineHeight: 36,
+      wordSpacing: 1,
+      letterSpacing: 1,
+      color: 'rgba(0, 0, 0, 1)',
+      status: TypePresetStatus.Active
     }
   ]
 };

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.test.ts

@@ -8,28 +8,28 @@ describe('generateTypePresetStyles', () => {
     const expectedMedia = (id: string) =>
 `@media (min-width: 0px) and (max-width: 767px) {
   .cntrl-preset-${id} {
-    font-size: 5.3332999999999995vw;
-    line-height: 6.4vw;
-    letter-spacing: 0.8vw;
-    word-spacing: 0.8vw;
+    font-size: 6.4vw;
+    line-height: 9.6vw;
+    letter-spacing: 0.26666666666666666vw;
+    word-spacing: 0.26666666666666666vw;
     color: rgba(0, 0, 0, 1);
   }
 }
 @media (min-width: 768px) and (max-width: 1023px) {
   .cntrl-preset-${id} {
-    font-size: 2.604vw;
-    line-height: 3.125vw;
-    letter-spacing: 0vw;
-    word-spacing: 0vw;
+    font-size: 3.125vw;
+    line-height: 4.6875vw;
+    letter-spacing: 0.13020833333333331vw;
+    word-spacing: 0.13020833333333331vw;
     color: rgba(0, 0, 0, 1);
   }
 }
 @media (min-width: 1024px) {
   .cntrl-preset-${id} {
-    font-size: 1.1111vw;
-    line-height: 1.3888vw;
-    letter-spacing: 0.06944vw;
-    word-spacing: 0.06944vw;
+    font-size: 1.6666666666666667vw;
+    line-height: 2.5vw;
+    letter-spacing: 0.06944444444444445vw;
+    word-spacing: 0.06944444444444445vw;
     color: rgba(0, 0, 0, 1);
   }
 }`;

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;
 
@@ -14,11 +14,11 @@ export function generateTypePresetStyles(preset: TTypePresets, layouts: TLayout[
   ${sorted.map(l => (`
 ${getLayoutMediaQuery(l.id, sorted)} {
   .cntrl-preset-${p.id} {
-    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
-    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};
+    font-size: ${p.fontSize / l.exemplary * 100}vw;
+    line-height: ${p.lineHeight / l.exemplary * 100}vw;
+    letter-spacing: ${p.letterSpacing / l.exemplary * 100}vw;
+    word-spacing: ${p.wordSpacing / l.exemplary * 100}vw;
+    color: ${CntrlColor.parse(p.color).toCss()};
   }
 }`)).join('\n')}`)).join('\n')}`);
   return stylesStr.replace(reEmptyLines, '');