@swan-io/lake 1.3.0 → 1.3.1
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/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode } from "react";
|
|
|
2
2
|
type Props = {
|
|
3
3
|
color: string;
|
|
4
4
|
children: ReactNode;
|
|
5
|
+
scoped?: boolean;
|
|
5
6
|
};
|
|
6
|
-
export declare const WithPartnerAccentColor: ({ color, children }: Props) => JSX.Element;
|
|
7
|
+
export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => JSX.Element;
|
|
7
8
|
export {};
|
|
@@ -19,12 +19,16 @@ const getContrastColor = (color) => {
|
|
|
19
19
|
}
|
|
20
20
|
return text;
|
|
21
21
|
};
|
|
22
|
-
export const WithPartnerAccentColor = ({ color, children }) => {
|
|
22
|
+
export const WithPartnerAccentColor = ({ color, scoped = false, children }) => {
|
|
23
23
|
const containerRef = useRef(null);
|
|
24
24
|
useLayoutEffect(() => {
|
|
25
25
|
try {
|
|
26
26
|
if (isNotNullish(containerRef.current)) {
|
|
27
27
|
const element = containerRef.current;
|
|
28
|
+
let scalePower = 1;
|
|
29
|
+
while (!meetsContrastGuidelines(setLightness(Math.pow(0.5, scalePower), color), "#fff").AALarge) {
|
|
30
|
+
scalePower += 0.1;
|
|
31
|
+
}
|
|
28
32
|
const colorScale = {
|
|
29
33
|
0: setLightness(1.0, color),
|
|
30
34
|
50: setLightness(0.97, color),
|
|
@@ -54,11 +58,25 @@ export const WithPartnerAccentColor = ({ color, children }) => {
|
|
|
54
58
|
element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
|
|
55
59
|
element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
|
|
56
60
|
element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
|
|
61
|
+
const rootElement = scoped ? element : element.ownerDocument.documentElement;
|
|
62
|
+
rootElement.style.setProperty("--color-partner-900", colorScale[900], "");
|
|
63
|
+
rootElement.style.setProperty("--color-partner-800", colorScale[800], "");
|
|
64
|
+
rootElement.style.setProperty("--color-partner-700", colorScale[700], "");
|
|
65
|
+
rootElement.style.setProperty("--color-partner-600", colorScale[600], "");
|
|
66
|
+
rootElement.style.setProperty("--color-partner-500", colorScale[500], "");
|
|
67
|
+
rootElement.style.setProperty("--color-partner-400", colorScale[400], "");
|
|
68
|
+
rootElement.style.setProperty("--color-partner-300", colorScale[300], "");
|
|
69
|
+
rootElement.style.setProperty("--color-partner-200", colorScale[200], "");
|
|
70
|
+
rootElement.style.setProperty("--color-partner-100", colorScale[100], "");
|
|
71
|
+
rootElement.style.setProperty("--color-partner-50", colorScale[50], "");
|
|
72
|
+
rootElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
|
|
73
|
+
rootElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
|
|
74
|
+
rootElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
|
|
57
75
|
}
|
|
58
76
|
}
|
|
59
77
|
catch (err) {
|
|
60
78
|
// will default to white label color
|
|
61
79
|
}
|
|
62
|
-
}, [color]);
|
|
80
|
+
}, [color, scoped]);
|
|
63
81
|
return (_jsx(View, { ref: containerRef, style: styles.container, children: children }));
|
|
64
82
|
};
|