@chayns-components/core 5.0.0-beta.710 → 5.0.0-beta.711

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.
@@ -139,7 +139,8 @@ const ColorSchemeProvider = ({
139
139
  style: {
140
140
  ...colors,
141
141
  ...cssVariables,
142
- ...style
142
+ ...style,
143
+ color: 'var(--chayns-color--text)'
143
144
  }
144
145
  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
145
146
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","useState","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","availableColors","getAvailableColorList","newColors","newTheme","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","createElement","ThemeProvider","Helmet","rel","href","displayName","_default","exports"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } 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';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype 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 * 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 secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\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\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<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 useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(result);\n });\n }, [designSettings]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\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 newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\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 { colorResult, themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update chayns-colors\n Object.keys(colorResult).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 newColors[key] = colorResult[key];\n });\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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","useState","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","availableColors","getAvailableColorList","newColors","newTheme","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","createElement","ThemeProvider","Helmet","rel","href","displayName","_default","exports"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } 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';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype 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 * 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 secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\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\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<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 useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(result);\n });\n }, [designSettings]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\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 newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\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 { colorResult, themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update chayns-colors\n Object.keys(colorResult).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 newColors[key] = colorResult[key];\n });\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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <div\n style={{ ...colors, ...cssVariables, ...style, color: 'var(--chayns-color--text)' }}\n >\n {children}\n </div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
@@ -132,7 +132,8 @@ const ColorSchemeProvider = _ref => {
132
132
  style: {
133
133
  ...colors,
134
134
  ...cssVariables,
135
- ...style
135
+ ...style,
136
+ color: 'var(--chayns-color--text)'
136
137
  }
137
138
  }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
138
139
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","colorResult","themeResult","fontSize","createElement","rel","href","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } 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';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype 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 * 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 secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\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\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<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 useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(result);\n });\n }, [designSettings]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\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 newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\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 { colorResult, themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update chayns-colors\n Object.keys(colorResult).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 newColors[key] = colorResult[key];\n });\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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","colorResult","themeResult","fontSize","createElement","rel","href","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } 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';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype 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 * 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 secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\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\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<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 useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n\n void getParagraphFormat().then((result) => {\n setInternalParagraphFormat(result);\n });\n }, [designSettings]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\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 newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\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 { colorResult, themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update chayns-colors\n Object.keys(colorResult).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 newColors[key] = colorResult[key];\n });\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\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <div\n style={{ ...colors, ...cssVariables, ...style, color: 'var(--chayns-color--text)' }}\n >\n {children}\n </div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.710",
3
+ "version": "5.0.0-beta.711",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -50,8 +50,8 @@
50
50
  },
51
51
  "devDependencies": {
52
52
  "@babel/cli": "^7.24.8",
53
- "@babel/core": "^7.24.9",
54
- "@babel/preset-env": "^7.24.8",
53
+ "@babel/core": "^7.25.2",
54
+ "@babel/preset-env": "^7.25.3",
55
55
  "@babel/preset-react": "^7.24.7",
56
56
  "@babel/preset-typescript": "^7.24.7",
57
57
  "@types/react": "^18.3.3",
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "13e7ba2adb59c398719b8ad9a6abc920eee278eb"
88
+ "gitHead": "9f5d97813beb58a6466f6578c9ae111acadc2c62"
89
89
  }