@greensight/gds
Version:
Greensight Design System
42 lines (39 loc) • 2.03 kB
JavaScript
var BREAKPOINTS_NAMES = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs', 'xxxs'];
var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
var MAJOR_STEP = 8;
var MINOR_MAX = 40;
/**
* Helper for scaling system usage. Pass `multiplier` to use major scale: values multiple 8. Pass `multiplier` and `isMinor` flag to use minor scale: values less than 40 multiple 4.
*
* You can define your own step with `customStep` argument but it must be done once per project. For example with step equals 10 major scale allows to use values multiple 10 and minor scale allows to use values less than 40 multiple 5. Recommended way to do this is define wrapper with your step as third argument:
*
* ```
* import { scale as scaleHelper } from '@greensight/gds';
* import { MAJOR_STEP } from '@scripts/constants';
*
* const scale = (multiplier: number, isMinor?: boolean) => scaleHelper(multiplier, isMinor, MAJOR_STEP);
*
* export default scale;
* ```
*/
var scale = function scale(multiplier, isMinor, customStep) {
var majorStep = customStep || MAJOR_STEP;
var truncatedMultiplier = Math.trunc(multiplier);
if (!Number.isInteger(multiplier)) {
console.warn("Spacings scale accepts only integers. Your value ".concat(multiplier, " was truncated to ").concat(truncatedMultiplier, "."));
}
var value;
if (!isMinor) {
value = majorStep * truncatedMultiplier;
} else {
var minorStep = majorStep / 2;
value = minorStep * truncatedMultiplier;
if (value > MINOR_MAX) {
var roundedValue = Math.trunc(value / majorStep) * majorStep;
console.warn("Minor scale is not defined on sizes bigger than ".concat(MINOR_MAX, "px. Your value ").concat(value, " was rounded to ").concat(roundedValue, "."));
value = roundedValue;
}
}
return value;
};
export { BREAKPOINTS_NAMES as B, FONT_STACK as F, scale as s };