design-system-simplefi
Version:
Design System for SimpleFi Applications
93 lines • 4.22 kB
JavaScript
import { curry, identity, join, map, memoizeWith, path, pipe, unless, } from 'ramda';
import { hasPath, isString, list } from 'ramda-adjunct';
import numeral from 'numeral';
import { BASE_FONT_SIZE } from '../theme/constants';
var convertValueToRem = memoizeWith(identity, unless(isString, function (px) { return px / BASE_FONT_SIZE + "rem"; }));
// pxToRem :: (number | string)... -> string
export var pxToRem = pipe(list, map(convertValueToRem), join(' '));
// getColor :: Color -> Props -> string
// Color - any key of 'ColorTypes' (src/theme/colors.enums.ts)
// Props - styled-components props object
export var getColor = curry(function (color, _a) {
var theme = _a.theme;
return path(['colors', color], theme);
});
// getFontFamily :: Family -> Props -> string
// Family - any key of 'family' (src/theme/typography.ts)
// Props - styled-components props object
export var getFontFamily = curry(function (family, _a) {
var theme = _a.theme;
return path(['typography', 'family', family], theme);
});
// getFontWeight :: Weight -> Props -> number
// Weight - any key of 'weight' (src/theme/typography.ts)
// Props - styled-components props object
export var getFontWeight = curry(function (weight, _a) {
var theme = _a.theme;
return path(['typography', 'weight', weight], theme);
});
// getFontSize :: Size -> Props -> string
// Size - any key of 'size' (src/theme/typography.ts)
// Props - styled-components props object
export var getFontSize = curry(function (size, _a) {
var theme = _a.theme;
return path(['typography', 'size', size], theme);
});
// getLineHeight :: Size -> Props -> string
// Size - any key of 'lineHeight' (src/theme/typography.ts)
// Props - styled-components props object
export var getLineHeight = curry(function (size, _a) {
var theme = _a.theme;
return path(['typography', 'lineHeight', size], theme);
});
// getBorderRadius :: Props -> string
// Props - styled-components props object
export var getBorderRadius = pipe(path(['theme', 'borderRadius']), function (radius) { return radius + "px"; });
// getButtonColor :: Type -> Props -> string
// Type - type of color (src/theme/buttons.ts)
// Props - styled-components props object
export var getButtonColor = curry(function (type, _a) {
var variant = _a.variant, color = _a.color, theme = _a.theme;
if (hasPath(['buttons', variant, color], theme)) {
return path(['buttons', variant, color, type], theme);
}
// eslint-disable-next-line no-console
console.warn("Desired color variant (variant: \"" + variant + "\", color: \"" + color + "\") is not currently implemented. Using \"primary\" color instead.");
return path(['buttons', variant, 'primary', type], theme);
});
// getLinkStyle :: Type -> Props -> string
// Type - type of color / decoration
// Props - styled-components props object
export var getLinkStyle = curry(function (type, _a) {
var color = _a.color, theme = _a.theme;
if (hasPath(['typography', 'links', color], theme)) {
return path(['typography', 'links', color, type], theme);
}
// eslint-disable-next-line no-console
console.warn("Desired color variant (color: \"" + color + "\") is not currently implemented. Using \"primary\" color instead.");
return path(['typography', 'links', 'primary', type], theme);
});
// getDepth :: Element -> Props -> string
// Element - any key of 'depth' (src/theme/depths.ts)
// Props - styled-components props object
export var getDepth = curry(function (element, _a) {
var theme = _a.theme;
return path(['depths', element], theme);
});
// getSpace:: Size -> Props -> string
// Size - any key of 'space' (src/theme/space.ts)
// Props - styled-components props object
export var getSpace = curry(function (size, _a) {
var theme = _a.theme;
return pipe(path(['space', size]), pxToRem)(theme);
});
export var abbreviateNumber = function (value) {
return numeral(value).format('0.[00]a').toUpperCase();
};
export var shortenAddress = function (address, chars) {
if (chars === void 0) { chars = 4; }
if (address.length < 10)
return address;
return address.slice(0, chars) + "..." + address.slice(-chars);
};
//# sourceMappingURL=helpers.js.map