@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
272 lines • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useKpiStyles = void 0;
var tslib_1 = require("tslib");
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
// Animations for NoKpisCard
var floatAnimation = (0, css_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-8px); }\n"], ["\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-8px); }\n"])));
var shimmerAnimation = (0, css_1.keyframes)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n 0% { background-position: -200% center; }\n 100% { background-position: 200% center; }\n"], ["\n 0% { background-position: -200% center; }\n 100% { background-position: 200% center; }\n"])));
var useKpiStyles = function () {
var styles = {
card: (0, css_1.css)({
width: "100%",
height: "310px",
borderRadius: 10,
background: react_components_1.tokens.colorNeutralBackground1,
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
boxShadow: react_components_1.tokens.shadow8,
overflow: "visible",
position: "relative",
padding: "0px 15px !important",
transition: "transform 0.25s ease, box-shadow 0.25s ease",
"&:hover, &:focus-within": {
zIndex: 10,
transform: "translateY(-2px)",
boxShadow: react_components_1.tokens.shadow16, // deeper on hover
},
}),
description: (0, css_1.css)({
fontSize: react_components_1.tokens.fontSizeBase300,
color: react_components_1.tokens.colorNeutralForeground4,
lineHeight: react_components_1.tokens.lineHeightBase400,
position: "relative",
zIndex: 1,
}),
footerMetric: (0, css_1.css)({
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: react_components_1.tokens.spacingVerticalXXS,
}),
footerIcon: (0, css_1.css)({
color: react_components_1.tokens.colorNeutralForeground3,
fontSize: react_components_1.tokens.fontSizeBase300,
}),
footerLabel: (0, css_1.css)({
fontSize: react_components_1.tokens.fontSizeBase100,
color: react_components_1.tokens.colorNeutralForeground3,
textTransform: "uppercase",
letterSpacing: "0.8px",
fontWeight: react_components_1.tokens.fontWeightMedium,
}),
footerValue: (0, css_1.css)({
fontSize: react_components_1.tokens.fontSizeBase400,
fontWeight: react_components_1.tokens.fontWeightSemibold,
color: react_components_1.tokens.colorNeutralForeground2,
}),
footerDivider: (0, css_1.css)({
height: "32px",
borderColor: react_components_1.tokens.colorNeutralStroke1,
}),
glowBlob: (0, css_1.css)({
position: "absolute",
top: "-60px",
right: "-60px",
width: "180px",
height: "180px",
borderRadius: "50%",
pointerEvents: "none",
zIndex: 0,
filter: "blur(40px)",
}),
glowBlobSuccess: (0, css_1.css)({
position: "absolute",
top: "-40px",
right: "-40px",
width: "160px",
height: "160px",
borderRadius: "50%",
pointerEvents: "none",
zIndex: 0,
background: "radial-gradient(circle, ".concat(react_components_1.tokens.colorPaletteLightGreenBackground2, " 0%, transparent 70%)"),
opacity: 0.7,
filter: "blur(20px)",
}),
glowBlobError: (0, css_1.css)({
position: "absolute",
top: "-40px",
right: "-40px",
width: "160px",
height: "160px",
borderRadius: "50%",
pointerEvents: "none",
zIndex: 0,
background: "radial-gradient(circle, ".concat(react_components_1.tokens.colorPaletteRedBackground2, " 0%, transparent 70%)"),
opacity: 0.6,
filter: "blur(20px)",
}),
headerActionBadge: (0, css_1.css)({
minWidth: "32px",
height: "32px",
borderRadius: "50% !important",
background: "".concat(react_components_1.tokens.colorNeutralBackground3, " !important"), // subtle circle bg
border: "none !important",
padding: "0 !important",
display: "flex",
alignItems: "center",
justifyContent: "center",
}),
kpiContainer: (0, css_1.css)({
width: "100%",
backgroundColor: react_components_1.tokens.colorNeutralBackground2,
borderRadius: 8,
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 280px), 1fr))",
gap: 16,
padding: 16,
}),
iconContainer: (0, css_1.css)({
width: 48,
height: 48,
borderRadius: 8,
display: "grid",
placeItems: "center",
background: react_components_1.tokens.colorNeutralBackgroundInverted,
}),
noKpiCard: (0, css_1.css)({
width: 280,
minHeight: 160,
display: "flex",
alignItems: "center",
justifyContent: "center",
}),
// NoKpisCard styles
noKpiCardContainer: (0, css_1.css)({
width: "100%",
minWidth: "280px",
minHeight: "280px",
borderRadius: "16px",
background: "linear-gradient(135deg, ".concat(react_components_1.tokens.colorNeutralBackground1, " 0%, ").concat(react_components_1.tokens.colorNeutralBackground3, " 100%)"),
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
boxShadow: react_components_1.tokens.shadow16,
overflow: "hidden",
position: "relative",
padding: "32px",
transition: "transform 0.3s ease, box-shadow 0.3s ease",
"&:hover": {
transform: "translateY(-4px)",
boxShadow: react_components_1.tokens.shadow28,
},
}),
noKpiBackgroundOrb1: (0, css_1.css)({
position: "absolute",
top: "0px",
right: "0px",
width: "180px",
height: "180px",
borderRadius: "50%",
background: "radial-gradient(circle, ".concat(react_components_1.tokens.colorBrandBackground2, " 0%, transparent 70%)"),
opacity: 0.8,
pointerEvents: "none",
filter: "blur(25px)",
transform: "translate(30%, -30%)",
}),
noKpiBackgroundOrb2: (0, css_1.css)({
position: "absolute",
bottom: "-30px",
left: "-30px",
width: "120px",
height: "120px",
borderRadius: "50%",
background: "radial-gradient(circle, ".concat(react_components_1.tokens.colorPaletteLavenderBackground2, " 0%, transparent 70%)"),
opacity: 0.5,
pointerEvents: "none",
filter: "blur(20px)",
}),
noKpiIconContainer: (0, css_1.css)({
width: "80px",
height: "80px",
borderRadius: "20px",
background: "linear-gradient(135deg, ".concat(react_components_1.tokens.colorBrandBackground, " 0%, ").concat(react_components_1.tokens.colorBrandBackground2, " 100%)"),
display: "flex",
alignItems: "center",
justifyContent: "center",
boxShadow: "0 8px 24px ".concat(react_components_1.tokens.colorBrandBackground, "40"),
animation: "".concat(floatAnimation, " 3s ease-in-out infinite"),
position: "relative",
zIndex: 1,
}),
noKpiIcon: (0, css_1.css)({
fontSize: "36px",
color: react_components_1.tokens.colorNeutralForegroundOnBrand,
}),
noKpiSparkle1: (0, css_1.css)({
position: "absolute",
top: "-8px",
right: "-8px",
color: react_components_1.tokens.colorPaletteYellowForeground1,
fontSize: "20px",
animation: "".concat(floatAnimation, " 2s ease-in-out infinite 0.5s"),
}),
noKpiSparkle2: (0, css_1.css)({
position: "absolute",
bottom: "-4px",
left: "-8px",
color: react_components_1.tokens.colorPaletteLavenderForeground2,
fontSize: "16px",
animation: "".concat(floatAnimation, " 2.5s ease-in-out infinite"),
}),
noKpiTitle: (0, css_1.css)({
fontSize: "22px",
fontWeight: react_components_1.tokens.fontWeightSemibold,
color: react_components_1.tokens.colorNeutralForeground1,
marginTop: "24px",
textAlign: "center",
position: "relative",
zIndex: 1,
}),
noKpiSubtitle: (0, css_1.css)({
fontSize: "14px",
color: react_components_1.tokens.colorNeutralForeground3,
textAlign: "center",
lineHeight: "1.6",
maxWidth: "320px",
marginTop: "8px",
position: "relative",
zIndex: 1,
}),
noKpiHighlight: (0, css_1.css)({
background: "linear-gradient(90deg, ".concat(react_components_1.tokens.colorBrandForeground1, ", ").concat(react_components_1.tokens.colorPaletteLavenderForeground2, ", ").concat(react_components_1.tokens.colorBrandForeground1, ")"),
backgroundSize: "200% auto",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
fontWeight: react_components_1.tokens.fontWeightSemibold,
animation: "".concat(shimmerAnimation, " 3s linear infinite"),
}),
noKpiButtonContainer: (0, css_1.css)({
marginTop: "24px",
position: "relative",
zIndex: 1,
}),
noKpiButton: (0, css_1.css)({
borderRadius: "10px",
padding: "10px 20px",
fontWeight: react_components_1.tokens.fontWeightSemibold,
transition: "transform 0.2s ease",
"&:hover": {
transform: "scale(1.02)",
},
}),
noKpiDecorativeLine: (0, css_1.css)({
width: "60px",
height: "4px",
borderRadius: "2px",
background: "linear-gradient(90deg, ".concat(react_components_1.tokens.colorBrandBackground, ", ").concat(react_components_1.tokens.colorPaletteLavenderBackground2, ")"),
marginTop: "16px",
position: "relative",
zIndex: 1,
}),
footerGrid: (0, css_1.css)({
width: "100%",
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(80px, 1fr))",
alignItems: "center",
}),
};
return styles;
};
exports.useKpiStyles = useKpiStyles;
var templateObject_1, templateObject_2;
//# sourceMappingURL=useKpiStyles.js.map