@razorpay/blade
Version:
The Design System that powers Razorpay
107 lines (101 loc) • 4.55 kB
JavaScript
import '../../tokens/global/index.js';
import '../makeSpace/index.js';
import { colors } from '../../tokens/global/colors.js';
import { makeSpace } from '../makeSpace/makeSpace.js';
import { size } from '../../tokens/global/size.js';
/**
* Returns the surface-style box shadow layers (elevation, border, top inner shadow)
* for use in Card, Table, and other elevated surfaces. Use the same shadow in both
* places for visual consistency.
*
* @param theme - Blade theme (from useTheme())
* @param colorScheme - 'light' | 'dark'
* @returns Object with elevation, border, and top shadow CSS strings
*/
var getSurfaceBoxShadow = function getSurfaceBoxShadow(theme, colorScheme) {
var boxShadow = {
light: {
elevation: "0px 6px 32px 4px ".concat(colors.neutral.blueGrayLight.a406),
border: "inset 0px 0px 0px 1px ".concat(theme.colors.interactive.border.gray.disabled),
top: "inset 0px -1.5px 0px 1px ".concat(theme.colors.surface.background.gray.intense)
},
dark: {
elevation: "0px 6px 12px 4px ".concat(colors.neutral.black[5]),
border: "inset 0px 0px 0px 1px ".concat(theme.colors.interactive.border.gray.disabled),
top: "inset 0px 0px 0px 1px ".concat(theme.colors.surface.background.gray.intense)
}
};
return boxShadow[colorScheme];
};
/**
* Returns a single CSS box-shadow string combining border, elevation, and top inner shadow.
* Use when applying the full surface shadow to an element.
*/
var getSurfaceBoxShadowString = function getSurfaceBoxShadowString(theme, colorScheme) {
var _getSurfaceBoxShadow = getSurfaceBoxShadow(theme, colorScheme),
border = _getSurfaceBoxShadow.border,
elevation = _getSurfaceBoxShadow.elevation,
top = _getSurfaceBoxShadow.top;
return "".concat(border, ", ").concat(elevation, ", ").concat(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]
}
}
};
/**
* Returns the surface gradient colors (top and bottom) for Card-style overlays.
*
* @param colorScheme - 'light' | 'dark'
* @returns Object with top and bottom gradient { start, end } colors
*/
var getSurfaceGradients = function getSurfaceGradients(colorScheme) {
return surfaceGradientsByScheme[colorScheme];
};
/**
* Returns the common surface decoration styles (box-shadow, border, gradients)
* for use in Card, Table, ListView, and other elevated surfaces.
* Spread this into a styled-component's return object alongside layout styles.
*/
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 !== void 0 && options.hideBorder ? "".concat(elevation, ", ").concat(top) : "".concat(border, ", ").concat(elevation, ", ").concat(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 ".concat(theme.colors.surface.border.gray.subtle) : '',
backgroundImage: "\n linear-gradient(to bottom, ".concat(topGradientColor.start, " 0%, ").concat(topGradientColor.end, " 100%),\n linear-gradient(to bottom, ").concat(bottomGradientColor.start, " 0%, ").concat(bottomGradientColor.end, " 100%)\n "),
backgroundPosition: "\n center top,\n center calc(100% - ".concat(bottomInset, "px)\n "),
backgroundSize: "\n calc(100% - ".concat(xInset, "px) ").concat(gradientHeight, ",\n calc(100% - ").concat(xInset, "px) ").concat(gradientHeight, "\n "),
backgroundRepeat: 'no-repeat'
};
};
export { getSurfaceBoxShadow, getSurfaceBoxShadowString, getSurfaceGradients, getSurfaceStyles };
//# sourceMappingURL=makeSurfaceStyles.js.map