@7shifts/sous-chef 3.87.2-beta.0 → 3.87.2-beta.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/dist/hooks/useBackgroundColorCheck.d.ts +15 -0
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +60 -5
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +60 -5
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -6512,14 +6512,60 @@ const LINK_TARGET = {
|
|
|
6512
6512
|
BLANK: '_blank'
|
|
6513
6513
|
};
|
|
6514
6514
|
|
|
6515
|
-
var styles$1g = {"link":"_EiQ4c"};
|
|
6515
|
+
var styles$1g = {"link":"_EiQ4c","link--contrast":"_weJDR"};
|
|
6516
|
+
|
|
6517
|
+
/**
|
|
6518
|
+
* This hook checks the background color of the container element
|
|
6519
|
+
* and determines if it's dark or light. It climbs up the DOM tree
|
|
6520
|
+
* to find the first ancestor with a non-transparent background color.
|
|
6521
|
+
*
|
|
6522
|
+
* NOTE: Use this hook only when necessary, as it involves DOM access
|
|
6523
|
+
* and may impact performance.
|
|
6524
|
+
*/
|
|
6525
|
+
const useContainerBackgroundColorCheck = ({
|
|
6526
|
+
ref,
|
|
6527
|
+
shouldCheck
|
|
6528
|
+
}) => {
|
|
6529
|
+
const [background, setBackground] = useState();
|
|
6530
|
+
// Walk up the DOM tree to find the first ancestor with a
|
|
6531
|
+
// non-transparent background color. Fallback to body color.
|
|
6532
|
+
const getEffectiveBackgroundColor = el => {
|
|
6533
|
+
let node = el == null ? void 0 : el.parentElement;
|
|
6534
|
+
while (node) {
|
|
6535
|
+
const bg = window.getComputedStyle(node).getPropertyValue('background-color');
|
|
6536
|
+
// "transparent" or rgba(..., 0) should be ignored
|
|
6537
|
+
const isTransparent = bg === 'transparent' || /rgba\([^)]*,\s*0\)/.test(bg);
|
|
6538
|
+
if (!isTransparent) {
|
|
6539
|
+
return bg;
|
|
6540
|
+
}
|
|
6541
|
+
// Stop climbing at <body> and use its color
|
|
6542
|
+
if (node.tagName.toLowerCase() === 'body') {
|
|
6543
|
+
break;
|
|
6544
|
+
}
|
|
6545
|
+
node = node.parentElement;
|
|
6546
|
+
}
|
|
6547
|
+
const bodyBg = window.getComputedStyle(document.body).getPropertyValue('background-color');
|
|
6548
|
+
return bodyBg;
|
|
6549
|
+
};
|
|
6550
|
+
useLayoutEffect(() => {
|
|
6551
|
+
const element = ref.current;
|
|
6552
|
+
if (!shouldCheck || !element) {
|
|
6553
|
+
return;
|
|
6554
|
+
}
|
|
6555
|
+
const bg = getEffectiveBackgroundColor(element);
|
|
6556
|
+
const rgb = bg.replace(/^rgba?\(|\s+|\)$/g, '').split(',').slice(0, 3).map(Number);
|
|
6557
|
+
const luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
|
|
6558
|
+
setBackground(luminance < 128 ? 'dark' : 'light');
|
|
6559
|
+
}, [ref, shouldCheck]);
|
|
6560
|
+
return background;
|
|
6561
|
+
};
|
|
6516
6562
|
|
|
6517
6563
|
const _excluded$t = ["href", "target", "theme", "onClick", "children"];
|
|
6518
6564
|
const Link = _ref => {
|
|
6519
6565
|
let {
|
|
6520
6566
|
href,
|
|
6521
6567
|
target = LINK_TARGET.BLANK,
|
|
6522
|
-
theme
|
|
6568
|
+
theme,
|
|
6523
6569
|
onClick,
|
|
6524
6570
|
children
|
|
6525
6571
|
} = _ref,
|
|
@@ -6527,15 +6573,24 @@ const Link = _ref => {
|
|
|
6527
6573
|
const {
|
|
6528
6574
|
dataProps
|
|
6529
6575
|
} = getDataProps(otherProps);
|
|
6576
|
+
const ref = React__default.useRef(null);
|
|
6577
|
+
const background = useContainerBackgroundColorCheck({
|
|
6578
|
+
ref,
|
|
6579
|
+
// It only needs to check the background when theme is not provided
|
|
6580
|
+
shouldCheck: !theme
|
|
6581
|
+
});
|
|
6582
|
+
// If there is no theme provided, determine it based on the container background
|
|
6583
|
+
const currentTheme = theme || (background === 'dark' ? LINK_THEME.CONTRAST : LINK_THEME.PRIMARY);
|
|
6530
6584
|
return React__default.createElement("a", _extends({}, dataProps, {
|
|
6531
6585
|
className: classnames(styles$1g['link'], {
|
|
6532
|
-
[styles$1g['link--primary']]:
|
|
6533
|
-
[styles$1g['link--contrast']]:
|
|
6586
|
+
[styles$1g['link--primary']]: currentTheme === LINK_THEME.PRIMARY,
|
|
6587
|
+
[styles$1g['link--contrast']]: currentTheme === LINK_THEME.CONTRAST
|
|
6534
6588
|
}),
|
|
6535
6589
|
href: href,
|
|
6536
6590
|
target: target,
|
|
6537
6591
|
onClick: onClick,
|
|
6538
|
-
rel: target === LINK_TARGET.BLANK ? 'noopener noreferrer' : ''
|
|
6592
|
+
rel: target === LINK_TARGET.BLANK ? 'noopener noreferrer' : '',
|
|
6593
|
+
ref: ref
|
|
6539
6594
|
}), children);
|
|
6540
6595
|
};
|
|
6541
6596
|
|