@chayns-components/core 5.0.0-beta.1321 → 5.0.0-beta.1324
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +4 -2
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -2
- package/lib/cjs/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js +12 -3
- package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +3 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js +7 -2
- package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js +12 -3
- package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js.map +1 -1
- package/lib/types/components/color-scheme-provider/hooks/useDesignSettings.d.ts +9 -1
- package/package.json +4 -4
|
@@ -41,12 +41,14 @@ const ColorSchemeProvider = ({
|
|
|
41
41
|
iconColor,
|
|
42
42
|
customVariables
|
|
43
43
|
}) => {
|
|
44
|
+
var _context$designSettin, _context$designSettin2;
|
|
45
|
+
const context = (0, _react.useContext)(ColorSchemeContext);
|
|
44
46
|
const {
|
|
45
47
|
color: internalColor,
|
|
46
48
|
colorMode: internalColorMode
|
|
47
49
|
} = (0, _chaynsApi.useSite)();
|
|
48
|
-
const color = colorProp ?? internalColor;
|
|
49
|
-
const colorMode = colorModeProp ?? internalColorMode;
|
|
50
|
+
const color = colorProp ?? (context === null || context === void 0 || (_context$designSettin = context.designSettings) === null || _context$designSettin === void 0 ? void 0 : _context$designSettin.color) ?? internalColor;
|
|
51
|
+
const colorMode = colorModeProp ?? (context === null || context === void 0 || (_context$designSettin2 = context.designSettings) === null || _context$designSettin2 === void 0 ? void 0 : _context$designSettin2.colorMode) ?? internalColorMode;
|
|
50
52
|
const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
|
|
51
53
|
const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
52
54
|
const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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","internalColor","internalColorMode","useSite","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 { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\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;EACF,MAAM;
|
|
1
|
+
{"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":"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","ignoreList":[]}
|
|
@@ -95,7 +95,12 @@ const useChaynsTheme = ({
|
|
|
95
95
|
theme,
|
|
96
96
|
customVariables
|
|
97
97
|
}) => {
|
|
98
|
-
const designSettings = (0, _useDesignSettings.useDesignSettings)(
|
|
98
|
+
const designSettings = (0, _useDesignSettings.useDesignSettings)({
|
|
99
|
+
color,
|
|
100
|
+
colorMode,
|
|
101
|
+
designSettings: designSettingsProp,
|
|
102
|
+
siteId
|
|
103
|
+
});
|
|
99
104
|
const paragraphFormat = (0, _useParagraphFormat.useParagraphFormat)(siteId, paragraphFormatProp);
|
|
100
105
|
const isMountedRef = (0, _react.useRef)(false);
|
|
101
106
|
const [internalTheme, setInternalTheme] = (0, _react.useState)(() => createTheme({
|
|
@@ -125,7 +130,7 @@ const useChaynsTheme = ({
|
|
|
125
130
|
iconColor,
|
|
126
131
|
customVariables
|
|
127
132
|
}));
|
|
128
|
-
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
133
|
+
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
|
|
129
134
|
return (0, _react.useMemo)(() => ({
|
|
130
135
|
theme: internalTheme,
|
|
131
136
|
designSettings,
|
|
@@ -1 +1 @@
|
|
|
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(
|
|
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":[]}
|
|
@@ -7,9 +7,14 @@ exports.useDesignSettings = void 0;
|
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _get = require("../../../api/theme/get");
|
|
10
|
-
const useDesignSettings = (
|
|
11
|
-
|
|
10
|
+
const useDesignSettings = ({
|
|
11
|
+
color,
|
|
12
|
+
colorMode,
|
|
13
|
+
designSettings,
|
|
14
|
+
siteId
|
|
15
|
+
}) => {
|
|
12
16
|
const [value, setValue] = (0, _react.useState)(undefined);
|
|
17
|
+
const styleSettings = (0, _chaynsApi.useStyleSettings)();
|
|
13
18
|
const shouldLoad = !designSettings && !(styleSettings !== null && styleSettings !== void 0 && styleSettings.designSettings);
|
|
14
19
|
(0, _react.useEffect)(() => {
|
|
15
20
|
if (shouldLoad) {
|
|
@@ -18,7 +23,11 @@ const useDesignSettings = (siteId, designSettings) => {
|
|
|
18
23
|
});
|
|
19
24
|
}
|
|
20
25
|
}, [shouldLoad, siteId]);
|
|
21
|
-
return
|
|
26
|
+
return {
|
|
27
|
+
...(designSettings ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings) ?? value),
|
|
28
|
+
color,
|
|
29
|
+
colorMode
|
|
30
|
+
};
|
|
22
31
|
};
|
|
23
32
|
exports.useDesignSettings = useDesignSettings;
|
|
24
33
|
//# sourceMappingURL=useDesignSettings.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDesignSettings.js","names":["_chaynsApi","require","_react","_get","useDesignSettings","
|
|
1
|
+
{"version":3,"file":"useDesignSettings.js","names":["_chaynsApi","require","_react","_get","useDesignSettings","color","colorMode","designSettings","siteId","value","setValue","useState","undefined","styleSettings","useStyleSettings","shouldLoad","useEffect","getDesignSettings","then","result","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\nimport { ThemeOptions } from './useChaynsTheme';\n\ninterface UseDesignSettingsOptions {\n color?: ThemeOptions['color'];\n colorMode?: ThemeOptions['colorMode'];\n designSettings?: ChaynsDesignSettings;\n siteId?: string;\n}\n\nexport const useDesignSettings = ({\n color,\n colorMode,\n designSettings,\n siteId,\n}: UseDesignSettingsOptions) => {\n const [value, setValue] = useState<ChaynsDesignSettings | undefined>(undefined);\n\n const styleSettings = useStyleSettings();\n\n const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n useEffect(() => {\n if (shouldLoad) {\n void getDesignSettings(siteId).then((result) => {\n setValue(result);\n });\n }\n }, [shouldLoad, siteId]);\n\n return {\n ...(designSettings ?? styleSettings?.designSettings ?? value),\n color,\n colorMode,\n } as ChaynsDesignSettings | undefined;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AAUO,MAAMG,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAmCC,SAAS,CAAC;EAE/E,MAAMC,aAAa,GAAG,IAAAC,2BAAgB,EAAC,CAAC;EAExC,MAAMC,UAAU,GAAG,CAACR,cAAc,IAAI,EAACM,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEN,cAAc;EAEpE,IAAAS,gBAAS,EAAC,MAAM;IACZ,IAAID,UAAU,EAAE;MACZ,KAAK,IAAAE,sBAAiB,EAACT,MAAM,CAAC,CAACU,IAAI,CAAEC,MAAM,IAAK;QAC5CT,QAAQ,CAACS,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACJ,UAAU,EAAEP,MAAM,CAAC,CAAC;EAExB,OAAO;IACH,IAAID,cAAc,KAAIM,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEN,cAAc,KAAIE,KAAK,CAAC;IAC7DJ,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAACc,OAAA,CAAAhB,iBAAA,GAAAA,iBAAA","ignoreList":[]}
|
|
@@ -33,12 +33,13 @@ const ColorSchemeProvider = ({
|
|
|
33
33
|
iconColor,
|
|
34
34
|
customVariables
|
|
35
35
|
}) => {
|
|
36
|
+
const context = useContext(ColorSchemeContext);
|
|
36
37
|
const {
|
|
37
38
|
color: internalColor,
|
|
38
39
|
colorMode: internalColorMode
|
|
39
40
|
} = useSite();
|
|
40
|
-
const color = colorProp ?? internalColor;
|
|
41
|
-
const colorMode = colorModeProp ?? internalColorMode;
|
|
41
|
+
const color = colorProp ?? context?.designSettings?.color ?? internalColor;
|
|
42
|
+
const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
|
|
42
43
|
const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
|
|
43
44
|
const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
44
45
|
const contextValue = useChaynsTheme({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","internalColor","internalColorMode","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"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 { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\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,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,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;EACF,MAAM;
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"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,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,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;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAGzB,OAAO,CAC3B,MAAOwB,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGtB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI5B,KAAA,CAAA8B,aAAA,CAACzB,aAAa;IAAC0B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB,CAACuB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C7B,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB;IAAC4B,SAAS,EAAC,uBAAuB;IAACd,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA8B,aAAA,CAACtB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}
|
|
@@ -89,7 +89,12 @@ export const useChaynsTheme = ({
|
|
|
89
89
|
theme,
|
|
90
90
|
customVariables
|
|
91
91
|
}) => {
|
|
92
|
-
const designSettings = useDesignSettings(
|
|
92
|
+
const designSettings = useDesignSettings({
|
|
93
|
+
color,
|
|
94
|
+
colorMode,
|
|
95
|
+
designSettings: designSettingsProp,
|
|
96
|
+
siteId
|
|
97
|
+
});
|
|
93
98
|
const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);
|
|
94
99
|
const isMountedRef = useRef(false);
|
|
95
100
|
const [internalTheme, setInternalTheme] = useState(() => createTheme({
|
|
@@ -119,7 +124,7 @@ export const useChaynsTheme = ({
|
|
|
119
124
|
iconColor,
|
|
120
125
|
customVariables
|
|
121
126
|
}));
|
|
122
|
-
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables]);
|
|
127
|
+
}, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
|
|
123
128
|
return useMemo(() => ({
|
|
124
129
|
theme: internalTheme,
|
|
125
130
|
designSettings,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"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(
|
|
1
|
+
{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"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":[]}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { useStyleSettings } from 'chayns-api';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { getDesignSettings } from '../../../api/theme/get';
|
|
4
|
-
export const useDesignSettings = (
|
|
5
|
-
|
|
4
|
+
export const useDesignSettings = ({
|
|
5
|
+
color,
|
|
6
|
+
colorMode,
|
|
7
|
+
designSettings,
|
|
8
|
+
siteId
|
|
9
|
+
}) => {
|
|
6
10
|
const [value, setValue] = useState(undefined);
|
|
11
|
+
const styleSettings = useStyleSettings();
|
|
7
12
|
const shouldLoad = !designSettings && !styleSettings?.designSettings;
|
|
8
13
|
useEffect(() => {
|
|
9
14
|
if (shouldLoad) {
|
|
@@ -12,6 +17,10 @@ export const useDesignSettings = (siteId, designSettings) => {
|
|
|
12
17
|
});
|
|
13
18
|
}
|
|
14
19
|
}, [shouldLoad, siteId]);
|
|
15
|
-
return
|
|
20
|
+
return {
|
|
21
|
+
...(designSettings ?? styleSettings?.designSettings ?? value),
|
|
22
|
+
color,
|
|
23
|
+
colorMode
|
|
24
|
+
};
|
|
16
25
|
};
|
|
17
26
|
//# sourceMappingURL=useDesignSettings.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useState","getDesignSettings","useDesignSettings","
|
|
1
|
+
{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useState","getDesignSettings","useDesignSettings","color","colorMode","designSettings","siteId","value","setValue","undefined","styleSettings","shouldLoad","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\nimport { ThemeOptions } from './useChaynsTheme';\n\ninterface UseDesignSettingsOptions {\n color?: ThemeOptions['color'];\n colorMode?: ThemeOptions['colorMode'];\n designSettings?: ChaynsDesignSettings;\n siteId?: string;\n}\n\nexport const useDesignSettings = ({\n color,\n colorMode,\n designSettings,\n siteId,\n}: UseDesignSettingsOptions) => {\n const [value, setValue] = useState<ChaynsDesignSettings | undefined>(undefined);\n\n const styleSettings = useStyleSettings();\n\n const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n useEffect(() => {\n if (shouldLoad) {\n void getDesignSettings(siteId).then((result) => {\n setValue(result);\n });\n }\n }, [shouldLoad, siteId]);\n\n return {\n ...(designSettings ?? styleSettings?.designSettings ?? value),\n color,\n colorMode,\n } as ChaynsDesignSettings | undefined;\n};\n"],"mappings":"AAAA,SAA+BA,gBAAgB,QAAQ,YAAY;AACnE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB,QAAQ,wBAAwB;AAU1D,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAmCS,SAAS,CAAC;EAE/E,MAAMC,aAAa,GAAGZ,gBAAgB,CAAC,CAAC;EAExC,MAAMa,UAAU,GAAG,CAACN,cAAc,IAAI,CAACK,aAAa,EAAEL,cAAc;EAEpEN,SAAS,CAAC,MAAM;IACZ,IAAIY,UAAU,EAAE;MACZ,KAAKV,iBAAiB,CAACK,MAAM,CAAC,CAACM,IAAI,CAAEC,MAAM,IAAK;QAC5CL,QAAQ,CAACK,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEL,MAAM,CAAC,CAAC;EAExB,OAAO;IACH,IAAID,cAAc,IAAIK,aAAa,EAAEL,cAAc,IAAIE,KAAK,CAAC;IAC7DJ,KAAK;IACLC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
|
|
@@ -1,2 +1,10 @@
|
|
|
1
1
|
import { ChaynsDesignSettings } from 'chayns-api';
|
|
2
|
-
|
|
2
|
+
import { ThemeOptions } from './useChaynsTheme';
|
|
3
|
+
interface UseDesignSettingsOptions {
|
|
4
|
+
color?: ThemeOptions['color'];
|
|
5
|
+
colorMode?: ThemeOptions['colorMode'];
|
|
6
|
+
designSettings?: ChaynsDesignSettings;
|
|
7
|
+
siteId?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const useDesignSettings: ({ color, colorMode, designSettings, siteId, }: UseDesignSettingsOptions) => ChaynsDesignSettings | undefined;
|
|
10
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1324",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@babel/preset-env": "^7.28.5",
|
|
58
58
|
"@babel/preset-react": "^7.28.5",
|
|
59
59
|
"@babel/preset-typescript": "^7.28.5",
|
|
60
|
-
"@types/react": "^18.3.
|
|
60
|
+
"@types/react": "^18.3.27",
|
|
61
61
|
"@types/react-dom": "^18.3.7",
|
|
62
|
-
"@types/styled-components": "^5.1.
|
|
62
|
+
"@types/styled-components": "^5.1.36",
|
|
63
63
|
"@types/uuid": "^10.0.0",
|
|
64
64
|
"babel-loader": "^9.2.1",
|
|
65
65
|
"chayns-api": "^2.4.30",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "13f36b0832d4d4da2375bb5c99029c7b28977fa6"
|
|
90
90
|
}
|