@chayns-components/core 5.0.0-beta.998 → 5.0.0

package/lib/cjs/components/checkbox/Checkbox.styles.js

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBoxWrapper = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _checkBox = require("../../utils/checkBox");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
     align-items: center;
     display: flex;
@@ -18,6 +16,18 @@ const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
 const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
     display: none;
 `;
+const StyledCheckboxBoxWrapper = exports.StyledCheckboxBoxWrapper = _styledComponents.default.div`
+    display: flex;
+    flex-shrink: 0;
+    height: 16px;
+    position: absolute;
+
+    ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch && (0, _styledComponents.css)`
+            right: 42px;
+        `}
+`;
 const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
     color: ${({
   theme
@@ -28,25 +38,22 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
     opacity: ${({
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
-    padding-left: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '48px' : '20px'};
+    position: relative;
     transition: opacity 0.2s ease;
     user-select: none;
+    height: 16px;
 
     &:after {
         ${({
   $isChecked,
-  $shouldShowAsSwitch,
-  $lineHeight,
-  theme
+  $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
                       background-color: white;
                       border-radius: 50%;
                       box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                       height: 16px;
                       left: 7px;
-                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
+                      top: 50%;
                       transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                       transition: transform 0.2s ease;
                       width: 16px;
@@ -56,10 +63,10 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
                       height: 10px;
                       left: 2px;
                       opacity: ${$isChecked ? 1 : 0};
-                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
+                      top: calc(50% - 2px);
                       transform: rotateZ(37deg) translateY(-50%);
                       transition: opacity 0.2s ease;
-                      width: 5.5px;
+                      width: 5px;
                   `}
 
         content: ' ';
@@ -96,20 +103,12 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '10px' : 0};
         position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         transition: background-color 0.2s ease;
         width: ${({
   $shouldShowAsSwitch
 }) => $shouldShowAsSwitch ? '28px' : '15px'};
-        ${({
-  $lineHeight,
-  theme,
-  $shouldShowAsSwitch
-}) => $lineHeight ? (0, _styledComponents.css)`
-                      top: ${(0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
-                  ` : (0, _styledComponents.css)`
-                      top: 50%;
-                      transform: translateY(-50%);
-                  `}
     }
 }
 `;
@@ -125,5 +124,12 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
 }) => $isDisabled ? 0.5 : 1};
     transition: opacity 0.2s ease;
     user-select: none;
+    ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
+                  padding-right: 48px;
+              ` : (0, _styledComponents.css)`
+                  padding-left: 20px;
+              `}
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/lib/cjs/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js

@@ -4,171 +4,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useColorScheme = exports.default = exports.ColorSchemeContext = void 0;
-var _colors = require("@chayns/colors");
 var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
-var _reactHelmet = require("react-helmet");
 var _styledComponents = require("styled-components");
-var _get = require("../../api/theme/get");
-var _font = require("../../utils/font");
 var _ColorSchemeProvider = require("./ColorSchemeProvider.styles");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// ToDo remove type after the framer-motion bug is Fixed
-
+var _useChaynsTheme = require("./hooks/useChaynsTheme");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
     .ellipsis {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+
+    footer {
+        font-size: 0.85rem;
+        color: #888;
+        margin: 10px 0 0;
+
+        & a {
+            color: #888;
+            letter-spacing: -0.3px;
+        }
+    }
 `;
 const ColorSchemeContext = exports.ColorSchemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 const useColorScheme = () => (0, _react.useContext)(ColorSchemeContext);
 exports.useColorScheme = useColorScheme;
-let useStyleSettings = () => undefined;
-void Promise.resolve().then(() => _interopRequireWildcard(require('chayns-api'))).then(module => {
-  useStyleSettings = module.useStyleSettings ?? useStyleSettings;
-});
 const ColorSchemeProvider = ({
   children,
-  color,
-  colorMode,
-  cssVariables = {},
+  color: colorProp,
+  colorMode: colorModeProp,
   secondaryColor,
   siteId,
   style = {},
-  paragraphFormat,
-  designSettings,
-  theme,
-  colors
+  iconColor,
+  customVariables
 }) => {
-  const [internalTheme, setInternalTheme] = (0, _react.useState)(theme ?? {});
-  const [internalDesignSettings, setInternalDesignSettings] = (0, _react.useState)();
-  const [internalParagraphFormat, setInternalParagraphFormat] = (0, _react.useState)();
-
-  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  var _context$designSettin, _context$designSettin2;
+  const context = (0, _react.useContext)(ColorSchemeContext);
   const {
     color: internalColor,
     colorMode: internalColorMode
-  } = (0, _chaynsApi.useSite)() ?? {};
-
-  // ToDo remove if this hook is no beta anymore
-  const styleSettings = useStyleSettings();
-  (0, _react.useEffect)(() => {
-    if (designSettings) {
-      setInternalDesignSettings(designSettings);
-    } else if (styleSettings !== null && styleSettings !== void 0 && styleSettings.designSettings) {
-      setInternalDesignSettings(styleSettings.designSettings);
-    } else if (!internalDesignSettings) {
-      void (0, _get.getDesignSettings)(siteId).then(result => {
-        setInternalDesignSettings(result);
-      });
-    }
-  }, [designSettings, internalDesignSettings, siteId, styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings]);
-  (0, _react.useEffect)(() => {
-    if (paragraphFormat) {
-      setInternalParagraphFormat(paragraphFormat);
-    } else if (styleSettings !== null && styleSettings !== void 0 && styleSettings.paragraphFormats) {
-      setInternalParagraphFormat(styleSettings.paragraphFormats);
-    } else if (!internalParagraphFormat) {
-      void (0, _get.getParagraphFormat)(siteId).then(result => {
-        setInternalParagraphFormat(result);
-      });
-    }
-  }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.paragraphFormats]);
-  (0, _react.useEffect)(() => {
-    let newTheme = {};
-    const availableColors = (0, _colors.getAvailableColorList)();
-    if (!colors || !theme) {
-      availableColors.forEach(colorName => {
-        const hexColor = (0, _colors.getColorFromPalette)(colorName, {
-          color: color ?? internalColor,
-          colorMode: colorMode ?? internalColorMode,
-          secondaryColor
-        });
-        if (hexColor) {
-          const rgbColor = (0, _colors.hexToRgb255)(hexColor);
-          if (!theme) {
-            newTheme[colorName] = hexColor;
-          }
-          if (rgbColor) {
-            if (!theme) {
-              newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
-            }
-          }
-        }
-      });
-    }
-    if (!theme) {
-      switch (colorMode ?? internalColorMode) {
-        case _chaynsApi.ColorMode.Light:
-          newTheme.colorMode = 'light';
-          break;
-        case _chaynsApi.ColorMode.Dark:
-          newTheme.colorMode = 'dark';
-          break;
-        default:
-          newTheme.colorMode = 'classic';
-          break;
-      }
-      if (internalDesignSettings) {
-        Object.keys(internalDesignSettings).forEach(key => {
-          if (key === 'iconStyle') {
-            newTheme[key] = (0, _font.convertIconStyle)(internalDesignSettings.iconStyle);
-            return;
-          }
-
-          // ToDo: Find better solution
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          newTheme[key] = internalDesignSettings[key];
-        });
-      }
-      if (internalParagraphFormat) {
-        const {
-          themeResult
-        } = (0, _font.getHeadlineColorSelector)(internalParagraphFormat);
-
-        // Update Theme
-        Object.keys(themeResult).forEach(key => {
-          // ToDo: Find better solution
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          newTheme[key] = themeResult[key];
-        });
-      }
-      newTheme.fontSize = (0, _font.getFontSize)();
-    } else {
-      newTheme = theme;
-    }
-    setInternalTheme(newTheme);
-  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
-  const contextValue = (0, _react.useMemo)(() => {
-    if (internalDesignSettings && internalParagraphFormat) {
-      return {
-        paragraphFormat: internalParagraphFormat,
-        designSettings: internalDesignSettings,
-        theme: internalTheme
-      };
-    }
-    return undefined;
-  }, [internalDesignSettings, internalParagraphFormat, internalTheme]);
+  } = (0, _chaynsApi.useSite)();
+  const color = colorProp ?? (context === null || context === void 0 || (_context$designSettin = context.designSettings) === null || _context$designSettin === void 0 ? void 0 : _context$designSettin.color) ?? internalColor;
+  const colorMode = colorModeProp ?? (context === null || context === void 0 || (_context$designSettin2 = context.designSettings) === null || _context$designSettin2 === void 0 ? void 0 : _context$designSettin2.colorMode) ?? internalColorMode;
+  const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
+  const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
+  const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
+    color,
+    iconColor,
+    colorMode,
+    secondaryColor,
+    siteId,
+    customVariables,
+    // Overrides the paragraphFormat on changed color or colorMode
+    paragraphFormat
+  });
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: internalTheme
+    theme: contextValue.theme
   }, /*#__PURE__*/_react.default.createElement(ColorSchemeContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("link", {
-    rel: "stylesheet",
-    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
-  })), /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.StyledColorSchemeProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.StyledColorSchemeProvider, {
     className: "color-scheme-provider",
-    style: {
-      ...cssVariables,
-      ...style
-    }
+    style: style
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null)));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_ColorSchemeProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","useStyleSettings","Promise","resolve","then","module","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","useState","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","styleSettings","useEffect","getDesignSettings","result","paragraphFormats","getParagraphFormat","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","ColorMode","Light","Dark","keys","key","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\nvoid import('chayns-api').then((module) => {\n    useStyleSettings = module.useStyleSettings ?? useStyleSettings;\n});\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","_context$designSettin","_context$designSettin2","context","internalColor","internalColorMode","useSite","designSettings","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAwD,SAAAE,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA6CxD,MAAMkB,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,gBAAG,IAAAE,oBAAa,EAAsCC,SAAS,CAAC;AAExF,MAAMC,cAAc,GAAGA,CAAA,KAAM,IAAAC,iBAAU,EAACL,kBAAkB,CAAC;AAACC,OAAA,CAAAG,cAAA,GAAAA,cAAA;AAEnE,MAAME,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EACF,MAAMC,OAAO,GAAG,IAAAd,iBAAU,EAACL,kBAAkB,CAAC;EAE9C,MAAM;IAAEQ,KAAK,EAAEY,aAAa;IAAEV,SAAS,EAAEW;EAAkB,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAExE,MAAMd,KAAK,GAAGC,SAAS,KAAIU,OAAO,aAAPA,OAAO,gBAAAF,qBAAA,GAAPE,OAAO,CAAEI,cAAc,cAAAN,qBAAA,uBAAvBA,qBAAA,CAAyBT,KAAK,KAAIY,aAAa;EAC1E,MAAMV,SAAS,GAAGC,aAAa,KAAIQ,OAAO,aAAPA,OAAO,gBAAAD,sBAAA,GAAPC,OAAO,CAAEI,cAAc,cAAAL,sBAAA,uBAAvBA,sBAAA,CAAyBR,SAAS,KAAIW,iBAAiB;EAE1F,MAAMG,uBAAuB,GACxBhB,KAAK,IAAIA,KAAK,KAAKY,aAAa,IAAKV,SAAS,KAAKW,iBAAiB;EAEzE,MAAMI,eAAe,GAAG,IAAAC,cAAO,EAC3B,MAAOF,uBAAuB,GAAG,EAAE,GAAGrB,SAAU,EAChD,CAACqB,uBAAuB,CAC5B,CAAC;EAED,MAAMG,YAAY,GAAG,IAAAC,8BAAc,EAAC;IAChCpB,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAS;EACJ,CAAC,CAAC;EAEF,oBACInD,MAAA,CAAAe,OAAA,CAAAwC,aAAA,CAACrD,iBAAA,CAAAsD,aAAa;IAACC,KAAK,EAAEJ,YAAY,CAACI;EAAM,gBACrCzD,MAAA,CAAAe,OAAA,CAAAwC,aAAA,CAAC7B,kBAAkB,CAACgC,QAAQ;IAACC,KAAK,EAAEN;EAAa,gBAC7CrD,MAAA,CAAAe,OAAA,CAAAwC,aAAA,CAACpD,oBAAA,CAAAyD,yBAAyB;IAACC,SAAS,EAAC,uBAAuB;IAACrB,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5BjC,MAAA,CAAAe,OAAA,CAAAwC,aAAA,CAAC/B,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDQ,mBAAmB,CAAC8B,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAApC,OAAA,CAAAZ,OAAA,GAEzCiB,mBAAmB","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledColorSchemeProvider = void 0;
 var _colors = require("@chayns/colors");
 var _styledComponents = require("styled-components");
+// noinspection CssUnresolvedCustomProperty
 const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledComponents.styled.div`
     color: var(--chayns-color--text);
 
@@ -15,5 +16,10 @@ const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledCom
   const colorNameRgb = `${colorName}-rgb`;
   return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
 })}
+
+    // ToDo: Remove .h1...
+    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
+        margin-top: 0;
+    }
 `;
 //# sourceMappingURL=ColorSchemeProvider.styles.js.map

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","map","colorName","colorNameRgb"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAKO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","map","colorName","colorNameRgb"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAKA;AACO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChaynsTheme = void 0;
+var _colors = require("@chayns/colors");
+var _chaynsApi = require("chayns-api");
+var _react = require("react");
+var _font = require("../../../utils/font");
+var _useDesignSettings = require("./useDesignSettings");
+var _useParagraphFormat = require("./useParagraphFormat");
+const createTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings,
+  paragraphFormat,
+  theme,
+  iconColor,
+  customVariables
+}) => {
+  if (theme) {
+    return theme;
+  }
+  const result = {};
+  if (customVariables) {
+    Object.keys(customVariables).forEach(key => {
+      result[key] = customVariables[key];
+    });
+  }
+  const availableColors = (0, _colors.getAvailableColorList)();
+  if (!colors) {
+    availableColors.forEach(colorName => {
+      const hexColor = (0, _colors.getColorFromPalette)(colorName, {
+        color,
+        colorMode,
+        secondaryColor
+      });
+      if (hexColor) {
+        const rgbColor = (0, _colors.hexToRgb255)(hexColor);
+        result[colorName] = hexColor;
+        if (rgbColor) {
+          result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+        }
+      }
+    });
+  }
+  if (designSettings) {
+    Object.keys(designSettings).forEach(key => {
+      if (key === 'iconStyle') {
+        result[key] = (0, _font.convertIconStyle)(designSettings.iconStyle);
+        return;
+      }
+      result[key] = designSettings[key];
+    });
+  }
+  if (paragraphFormat) {
+    const {
+      themeResult
+    } = (0, _font.getHeadlineColorSelector)(paragraphFormat);
+
+    // Update Theme
+    Object.keys(themeResult).forEach(key => {
+      result[key] = themeResult[key];
+    });
+  }
+  switch (colorMode) {
+    case _chaynsApi.ColorMode.Light:
+      result.colorMode = 'light';
+      break;
+    case _chaynsApi.ColorMode.Dark:
+      result.colorMode = 'dark';
+      break;
+    default:
+      result.colorMode = 'classic';
+      break;
+  }
+  if (iconColor) {
+    result.iconColor = iconColor;
+  }
+  result.fontSize = (designSettings === null || designSettings === void 0 ? void 0 : designSettings.fontSizePx) || 15;
+  return result;
+};
+const useChaynsTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings: designSettingsProp,
+  paragraphFormat: paragraphFormatProp,
+  siteId,
+  iconColor,
+  theme,
+  customVariables
+}) => {
+  const designSettings = (0, _useDesignSettings.useDesignSettings)({
+    color,
+    colorMode,
+    designSettings: designSettingsProp,
+    siteId
+  });
+  const paragraphFormat = (0, _useParagraphFormat.useParagraphFormat)(siteId, paragraphFormatProp);
+  const isMountedRef = (0, _react.useRef)(false);
+  const [internalTheme, setInternalTheme] = (0, _react.useState)(() => createTheme({
+    colors,
+    colorMode,
+    color,
+    secondaryColor,
+    designSettings,
+    paragraphFormat,
+    theme,
+    iconColor,
+    customVariables
+  }));
+  (0, _react.useEffect)(() => {
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      return;
+    }
+    setInternalTheme(createTheme({
+      colors,
+      colorMode,
+      color,
+      secondaryColor,
+      designSettings,
+      paragraphFormat,
+      theme,
+      iconColor,
+      customVariables
+    }));
+  }, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
+  return (0, _react.useMemo)(() => ({
+    theme: internalTheme,
+    designSettings,
+    paragraphFormat
+  }), [internalTheme, designSettings, paragraphFormat]);
+};
+exports.useChaynsTheme = useChaynsTheme;
+//# sourceMappingURL=useChaynsTheme.js.map

package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n    colors?: Theme;\n    colorMode: ColorMode;\n    iconColor?: string;\n    color: string;\n    secondaryColor?: string;\n    designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n    paragraphFormat?: ChaynsParagraphFormat[];\n    siteId?: string;\n    theme?: Theme;\n    customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings,\n    paragraphFormat,\n    theme,\n    iconColor,\n    customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n    if (theme) {\n        return theme;\n    }\n\n    const result: Theme = {};\n\n    if (customVariables) {\n        Object.keys(customVariables).forEach((key) => {\n            result[key] = customVariables[key] as string;\n        });\n    }\n\n    const availableColors = getAvailableColorList();\n\n    if (!colors) {\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                result[colorName] = hexColor;\n\n                if (rgbColor) {\n                    result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n    }\n\n    if (designSettings) {\n        Object.keys(designSettings).forEach((key) => {\n            if (key === 'iconStyle') {\n                result[key] = convertIconStyle(designSettings.iconStyle);\n\n                return;\n            }\n            result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n        });\n    }\n\n    if (paragraphFormat) {\n        const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n        // Update Theme\n        Object.keys(themeResult).forEach((key) => {\n            result[key] = themeResult[key] as string;\n        });\n    }\n\n    switch (colorMode) {\n        case ColorMode.Light:\n            result.colorMode = 'light';\n            break;\n        case ColorMode.Dark:\n            result.colorMode = 'dark';\n            break;\n        default:\n            result.colorMode = 'classic';\n            break;\n    }\n\n    if (iconColor) {\n        result.iconColor = iconColor;\n    }\n\n    result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n    return result;\n};\n\nexport const useChaynsTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings: designSettingsProp,\n    paragraphFormat: paragraphFormatProp,\n    siteId,\n    iconColor,\n    theme,\n    customVariables,\n}: ThemeOptions) => {\n    const designSettings = useDesignSettings({\n        color,\n        colorMode,\n        designSettings: designSettingsProp,\n        siteId,\n    });\n\n    const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n    const isMountedRef = useRef<boolean>(false);\n\n    const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n        createTheme({\n            colors,\n            colorMode,\n            color,\n            secondaryColor,\n            designSettings,\n            paragraphFormat,\n            theme,\n            iconColor,\n            customVariables,\n        }),\n    );\n\n    useEffect(() => {\n        if (!isMountedRef.current) {\n            isMountedRef.current = true;\n            return;\n        }\n        setInternalTheme(\n            createTheme({\n                colors,\n                colorMode,\n                color,\n                secondaryColor,\n                designSettings,\n                paragraphFormat,\n                theme,\n                iconColor,\n                customVariables,\n            }),\n        );\n    }, [\n        color,\n        colorMode,\n        colors,\n        designSettings,\n        paragraphFormat,\n        secondaryColor,\n        theme,\n        customVariables,\n        iconColor,\n    ]);\n\n    return useMemo(\n        () => ({\n            theme: internalTheme,\n            designSettings,\n            paragraphFormat,\n        }),\n        [internalTheme, designSettings, paragraphFormat],\n    );\n};\n"],"mappings":"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","ignoreList":[]}