@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
196 lines • 7.84 kB
JavaScript
import { styled } from '@mui/material/styles';
import { LinearProgress, CircularProgress, Box } from '@mui/material';
// Helper to blend two hex colors (simple average)
function blendColors(color1, color2, weight = 0.7) {
color1 = color1.replace('#', '');
color2 = color2.replace('#', '');
const r = Math.round(parseInt(color1.substring(0, 2), 16) * weight +
parseInt(color2.substring(0, 2), 16) * (1 - weight));
const g = Math.round(parseInt(color1.substring(2, 4), 16) * weight +
parseInt(color2.substring(2, 4), 16) * (1 - weight));
const b = Math.round(parseInt(color1.substring(4, 6), 16) * weight +
parseInt(color2.substring(4, 6), 16) * (1 - weight));
return `#${r.toString(16).padStart(2, '0')}${g
.toString(16)
.padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}
export const ProgressContainer = styled(Box)(({ theme }) => ({
width: '100%',
}));
export const StyledLinearProgress = styled(LinearProgress, {
shouldForwardProp: (prop) => prop !== 'size',
})(({ theme, color }) => {
const barHeight = 12; // px, as requested
const barRadius = barHeight / 2; // half the height for full half-circle
// Get main and light color from theme, fallback to green
const mainColor = color ? theme.palette[color]?.main || '#48C774' : '#48C774';
const veryLightColor = color
? theme.palette[color]?.main
? theme.palette[color].main + '22' // add alpha for extra lightness
: '#EAFBF2'
: '#EAFBF2';
const lightColor = color && theme.palette[color]?.light ? theme.palette[color].light : mainColor;
// Blend main and light color for a slightly darker wave
const waveColor = blendColors(mainColor, lightColor, 0.7);
// Dark mode adjustments
const isDarkMode = theme.palette.mode === 'dark';
const isNeumorphicDark = theme.palette.background.default === '#1a1a1a' && theme.palette.mode === 'dark';
// Background color based on theme mode
let backgroundColor = veryLightColor;
if (isDarkMode) {
backgroundColor = color
? theme.palette[color]?.main + '15' // darker alpha for dark mode
: '#2a2a2a';
}
if (isNeumorphicDark) {
backgroundColor = '#2a2a2a';
}
// Neumorphic effects for dark neumorphic theme
const neumorphicStyles = isNeumorphicDark ? {
boxShadow: 'inset 2px 2px 5px #0a0a0a, inset -2px -2px 5px #2a2a2a',
border: '1px solid #333333',
} : {};
return {
height: barHeight,
borderRadius: barRadius,
backgroundColor,
...neumorphicStyles,
'& .MuiLinearProgress-bar': {
borderRadius: barRadius,
backgroundColor: mainColor, // fallback solid
backgroundImage: `linear-gradient(120deg, ${mainColor} 40%, ${waveColor} 50%, ${mainColor} 60%)`,
backgroundSize: '200% 100%',
animation: 'wave 2s linear infinite',
// Add neumorphic glow effect for dark neumorphic theme
...(isNeumorphicDark && {
boxShadow: `0 0 10px ${mainColor}40, inset 0 0 5px ${mainColor}20`,
}),
},
'@keyframes wave': {
'0%': { backgroundPosition: '200% 0' },
'100%': { backgroundPosition: '-200% 0' },
},
};
});
export const StyledCircularProgress = styled(CircularProgress)(({ theme }) => {
const isNeumorphicDark = theme.palette.background.default === '#1a1a1a' && theme.palette.mode === 'dark';
return {
'& .MuiCircularProgress-circle': {
strokeLinecap: 'round',
// Add neumorphic glow effect for dark neumorphic theme
...(isNeumorphicDark && {
filter: 'drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))',
}),
},
};
});
export const StyledPillLabelProgress = styled(Box)(({ theme, value, label, color = 'unicityNavy' }) => {
const paletteEntry = theme.palette[color];
const mainColor = typeof paletteEntry === 'object' && paletteEntry && 'main' in paletteEntry
? paletteEntry.main
: '#183A5A';
// Theme-aware border and background colors
const isDarkMode = theme.palette.mode === 'dark';
const isNeumorphicDark = theme.palette.background.default === '#1a1a1a' && theme.palette.mode === 'dark';
let borderColor = typeof paletteEntry === 'object' && paletteEntry && 'light' in paletteEntry
? paletteEntry.light
: '#E9EEF3';
let backgroundColor = borderColor;
if (isDarkMode) {
borderColor = theme.palette.grey[700];
backgroundColor = theme.palette.grey[800];
}
if (isNeumorphicDark) {
borderColor = '#333333';
backgroundColor = '#2a2a2a';
}
const neumorphicStyles = isNeumorphicDark ? {
boxShadow: 'inset 2px 2px 5px #0a0a0a, inset -2px -2px 5px #2a2a2a',
border: '1px solid #333333',
} : {};
return {
width: '100%',
height: 24,
borderRadius: 12, // half the height for full half-circle
background: backgroundColor,
position: 'relative',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...neumorphicStyles,
};
});
export const StyledPillLabelFill = styled(Box)(({ theme, value, color = 'unicityNavy' }) => {
const paletteEntry = theme.palette[color];
const mainColor = typeof paletteEntry === 'object' && paletteEntry && 'main' in paletteEntry
? paletteEntry.main
: '#183A5A';
const isNeumorphicDark = theme.palette.background.default === '#1a1a1a' && theme.palette.mode === 'dark';
const neumorphicStyles = isNeumorphicDark ? {
boxShadow: `inset 0 0 10px ${mainColor}40`,
} : {};
return {
position: 'absolute',
left: 0,
top: 0,
height: '100%',
width: `${value}%`,
background: mainColor,
borderRadius: 12, // half the height for full half-circle
overflow: 'hidden',
zIndex: 1,
pointerEvents: 'none',
...neumorphicStyles,
};
});
export const StyledPillLabelTextSplit = styled(Box)(({ theme, value, color = 'unicityNavy', contrast }) => {
const paletteEntry = theme.palette[color];
const mainColor = typeof paletteEntry === 'object' && paletteEntry && 'main' in paletteEntry
? paletteEntry.main
: '#183A5A';
const isDarkMode = theme.palette.mode === 'dark';
const isNeumorphicDark = theme.palette.background.default === '#1a1a1a' && theme.palette.mode === 'dark';
// Theme-aware text colors
let textColor = contrast === 'light' ? '#fff' : mainColor;
if (isDarkMode) {
if (contrast === 'light') {
textColor = '#fff';
}
else {
textColor = theme.palette.text.primary;
}
}
if (isNeumorphicDark) {
if (contrast === 'light') {
textColor = '#fff';
}
else {
textColor = '#c1c2c8';
}
}
return {
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 500,
fontSize: 11,
zIndex: 2,
pointerEvents: 'none',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
padding: '0 12px',
color: textColor,
transition: 'color 0.3s',
clipPath: contrast === 'light'
? `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)` // white label: only show up to fill
: `polygon(${value}% 0, 100% 0, 100% 100%, ${value}% 100%)`, // navy label: only show after fill
};
});
//# sourceMappingURL=Progress.style.js.map