@razorpay/blade
Version:
The Design System that powers Razorpay
20 lines (17 loc) • 2.96 kB
JavaScript
import { colors } from '../../tokens/global/colors.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
import { makeSpace } from '../makeSpace/makeSpace.js';
var getSurfaceBoxShadow=function getSurfaceBoxShadow(theme,colorScheme){var boxShadow={light:{elevation:`0px 6px 32px 4px ${colors.neutral.blueGrayLight.a406}`,border:`inset 0px 0px 0px 1px ${theme.colors.interactive.border.gray.disabled}`,top:`inset 0px -1.5px 0px 1px ${theme.colors.surface.background.gray.intense}`},dark:{elevation:`0px 6px 12px 4px ${colors.neutral.black[5]}`,border:`inset 0px 0px 0px 1px ${theme.colors.interactive.border.gray.disabled}`,top:`inset 0px 0px 0px 1px ${theme.colors.surface.background.gray.intense}`}};return boxShadow[colorScheme];};var getSurfaceBoxShadowString=function getSurfaceBoxShadowString(theme,colorScheme){var _getSurfaceBoxShadow=getSurfaceBoxShadow(theme,colorScheme),border=_getSurfaceBoxShadow.border,elevation=_getSurfaceBoxShadow.elevation,top=_getSurfaceBoxShadow.top;return `${border}, ${elevation}, ${top}`;};var surfaceGradientsByScheme={light:{top:{start:colors.neutral.blueGrayLight[0],end:colors.neutral.blueGrayLight[0]},bottom:{start:colors.neutral.blueGrayLight[0],end:colors.neutral.blueGrayLight[50]}},dark:{top:{start:colors.neutral.blueGrayDark[1000],end:colors.neutral.blueGrayDark[1100]},bottom:{start:colors.neutral.blueGrayDark[1100],end:colors.neutral.blueGrayDark[1100]}}};var getSurfaceGradients=function getSurfaceGradients(colorScheme){return surfaceGradientsByScheme[colorScheme];};var getSurfaceStyles=function getSurfaceStyles(theme,colorScheme,options){var isDarkMode=colorScheme==='dark';var _getSurfaceBoxShadow2=getSurfaceBoxShadow(theme,colorScheme),border=_getSurfaceBoxShadow2.border,elevation=_getSurfaceBoxShadow2.elevation,top=_getSurfaceBoxShadow2.top;var boxShadow=options!=null&&options.hideBorder?`${elevation}, ${top}`:`${border}, ${elevation}, ${top}`;var _getSurfaceGradients=getSurfaceGradients(colorScheme),topGradientColor=_getSurfaceGradients.top,bottomGradientColor=_getSurfaceGradients.bottom;var gradientHeight=makeSpace(size[16]);var bottomInset=isDarkMode?1:2;var xInset=2;return {boxShadow:boxShadow,border:'none',borderTop:isDarkMode?`1px solid ${theme.colors.surface.border.gray.subtle}`:'',backgroundImage:`
linear-gradient(to bottom, ${topGradientColor.start} 0%, ${topGradientColor.end} 100%),
linear-gradient(to bottom, ${bottomGradientColor.start} 0%, ${bottomGradientColor.end} 100%)
`,backgroundPosition:`
center top,
center calc(100% - ${bottomInset}px)
`,backgroundSize:`
calc(100% - ${xInset}px) ${gradientHeight},
calc(100% - ${xInset}px) ${gradientHeight}
`,backgroundRepeat:'no-repeat'};};
export { getSurfaceBoxShadow, getSurfaceBoxShadowString, getSurfaceGradients, getSurfaceStyles };
//# sourceMappingURL=makeSurfaceStyles.js.map