@chayns-components/core 5.0.0-beta.1098 → 5.0.0-beta.1099
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 +2 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.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/package.json +2 -2
|
@@ -49,6 +49,7 @@ const ColorSchemeProvider = ({
|
|
|
49
49
|
const color = colorProp ?? internalColor;
|
|
50
50
|
const colorMode = colorModeProp ?? internalColorMode;
|
|
51
51
|
const overrideParagraphFormat = color && color !== internalColor || colorMode && colorMode !== internalColorMode;
|
|
52
|
+
const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
52
53
|
const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
|
|
53
54
|
color,
|
|
54
55
|
colorMode,
|
|
@@ -56,7 +57,7 @@ const ColorSchemeProvider = ({
|
|
|
56
57
|
siteId,
|
|
57
58
|
customVariables,
|
|
58
59
|
// Overrides the paragraphFormat on changed color or colorMode
|
|
59
|
-
paragraphFormat
|
|
60
|
+
paragraphFormat
|
|
60
61
|
});
|
|
61
62
|
return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
|
|
62
63
|
theme: contextValue.theme
|
|
@@ -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","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","
|
|
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","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\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 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 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 && colorMode !== internalColorMode);\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\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":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useSite } from 'chayns-api';
|
|
2
|
-
import React, { createContext, useContext } from 'react';
|
|
2
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
3
3
|
import { createGlobalStyle, ThemeProvider } from 'styled-components';
|
|
4
4
|
import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
|
|
5
5
|
import { useChaynsTheme } from './hooks/useChaynsTheme';
|
|
@@ -43,6 +43,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
43
43
|
const color = colorProp ?? internalColor;
|
|
44
44
|
const colorMode = colorModeProp ?? internalColorMode;
|
|
45
45
|
const overrideParagraphFormat = color && color !== internalColor || colorMode && colorMode !== internalColorMode;
|
|
46
|
+
const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
46
47
|
const contextValue = useChaynsTheme({
|
|
47
48
|
color,
|
|
48
49
|
colorMode,
|
|
@@ -50,7 +51,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
50
51
|
siteId,
|
|
51
52
|
customVariables,
|
|
52
53
|
// Overrides the paragraphFormat on changed color or colorMode
|
|
53
|
-
paragraphFormat
|
|
54
|
+
paragraphFormat
|
|
54
55
|
});
|
|
55
56
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
56
57
|
theme: contextValue.theme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","customVariables","internalColor","internalColorMode","overrideParagraphFormat","
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","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\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 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 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 && colorMode !== internalColorMode);\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\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;;AAyCvD;;AAGA,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,GAAGC,IAAA,IAQpD;EAAA,IARqD;IACvDC,QAAQ;IACRC,KAAK,EAAEC,SAAS;IAChBC,SAAS,EAAEC,aAAa;IACxBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM;IAAEE,KAAK,EAAEQ,aAAa;IAAEN,SAAS,EAAEO;EAAkB,CAAC,GAAGzB,OAAO,CAAC,CAAC;EAExE,MAAMgB,KAAK,GAAGC,SAAS,IAAIO,aAAa;EACxC,MAAMN,SAAS,GAAGC,aAAa,IAAIM,iBAAiB;EACpD,MAAMC,uBAAuB,GACxBV,KAAK,IAAIA,KAAK,KAAKQ,aAAa,IAAMN,SAAS,IAAIA,SAAS,KAAKO,iBAAkB;EACxF,MAAME,eAAe,GAAGvB,OAAO,CAC3B,MAAOsB,uBAAuB,GAAG,EAAE,GAAGf,SAAU,EAChD,CAACe,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGpB,cAAc,CAAC;IAChCQ,KAAK;IACLE,SAAS;IACTE,cAAc;IACdC,MAAM;IACNE,eAAe;IACf;IACAI;EACJ,CAAC,CAAC;EAEF,oBACI1B,KAAA,CAAA4B,aAAA,CAACvB,aAAa;IAACwB,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC7B,KAAA,CAAA4B,aAAA,CAACnB,kBAAkB,CAACqB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C3B,KAAA,CAAA4B,aAAA,CAACtB,yBAAyB;IAAC0B,SAAS,EAAC,uBAAuB;IAACX,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bd,KAAA,CAAA4B,aAAA,CAACpB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACqB,WAAW,GAAG,qBAAqB;AAEvD,eAAerB,mBAAmB","ignoreList":[]}
|
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.1099",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "5501dffde010cd9e57bf9bc858736d5cd21fe364"
|
|
90
90
|
}
|