@littlespoon/button
Version:
Little Spoon button
174 lines • 8.79 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonBase = void 0;
var alert_1 = require("@littlespoon/theme/lib/colors/alert");
var primary_1 = require("@littlespoon/theme/lib/colors/primary");
var secondary_1 = require("@littlespoon/theme/lib/colors/secondary");
var token_1 = require("@littlespoon/theme/lib/colors/token");
var primary_2 = require("@littlespoon/theme/lib/fonts/primary");
var utils_1 = require("@littlespoon/theme/lib/utils");
var styled_components_1 = __importDefault(require("styled-components"));
exports.ButtonBase = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n border-radius: ", ";\n border: 0;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n font: ", " ", " ", ";\n letter-spacing: ", ";\n text-decoration: none;\n text-transform: uppercase;\n width: fit-content;\n ", "\n"], ["\n align-items: center;\n border-radius: ", ";\n border: 0;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n font: ", " ", " ", ";\n letter-spacing: ", ";\n text-decoration: none;\n text-transform: uppercase;\n width: fit-content;\n ", "\n"
/**
* Returns the CSS for the button.
*/
])), (0, utils_1.rem)(0.5), primary_2.weight.bold, (0, utils_1.rem)(1.6), primary_2.family, (0, utils_1.rem)(0.15), getCss);
/**
* Returns the CSS for the button.
*/
function getCss(options) {
if (typeof options.size === 'object') {
var breakpoints = Object.entries(options.size);
return breakpoints.reduce(function (css, _a) {
var breakpoint = _a[0], size = _a[1];
if (+breakpoint === 0) {
css += getSizeCss(__assign(__assign({}, options), { size: size }));
css += getVariantCss(__assign(__assign({}, options), { size: size }));
}
else {
css += "\n @media screen and (min-width: ".concat(breakpoint, "px) {\n ").concat(getSizeCss(__assign(__assign({}, options), { size: size })), " \n ").concat(getVariantCss(__assign(__assign({}, options), { size: size })), " \n }\n ");
}
return css;
}, '');
}
return "\n ".concat(getSizeCss(options), "\n ").concat(getVariantCss(options), "\n ");
}
/**
* Gets size styles.
*/
function getSizeCss(props) {
var size = props.size;
if (!size) {
return '';
}
var fontSize = primary_2.button[size].fontSize;
var height = '';
var letterSpacing = primary_2.button[size].letterSpacing;
var lineHeight = primary_2.button.small.lineHeight;
var padding = '';
switch (size) {
case 'small':
height = (0, utils_1.rem)(3.2);
padding = "".concat((0, utils_1.rem)(0.6), " ").concat((0, utils_1.rem)(1.6));
break;
case 'medium':
height = (0, utils_1.rem)(4);
padding = "".concat((0, utils_1.rem)(0.8), " ").concat((0, utils_1.rem)(1.8));
break;
case 'large':
height = (0, utils_1.rem)(5);
padding = "".concat((0, utils_1.rem)(1.2), " ").concat((0, utils_1.rem)(2.2), ";");
break;
case 'xlarge':
height = (0, utils_1.rem)(5.8);
padding = "".concat((0, utils_1.rem)(1.4), " ").concat((0, utils_1.rem)(2.4), ";");
break;
}
return "\n font-size: ".concat(fontSize, ";\n height: ").concat(height, ";\n line-height: ").concat(lineHeight, ";\n letter-spacing: ").concat(letterSpacing, ";\n padding: ").concat(padding, ";\n ");
}
/**
* Gets variant styles.
*/
function getVariantCss(props) {
var disabled = props.disabled, variant = props.variant;
var backgroundColor = '';
var border = '';
var color = '';
var focusColor = '';
var focusOutline = '';
var hoverBackgroundColor = '';
var hoverColor = '';
var activeBackgroundColor = '';
var activeColor = '';
/**
* {@link https://zeroheight.com/3ddd0f892/p/01a397-buttons/t/190120}
*/
if (disabled) {
backgroundColor = (0, secondary_1.grey20)();
color = (0, secondary_1.grey40)();
focusColor = color;
focusOutline = "".concat((0, utils_1.rem)(0.2), " solid ").concat((0, alert_1.informative50)());
hoverBackgroundColor = backgroundColor;
hoverColor = color;
activeBackgroundColor = (0, secondary_1.grey80)();
activeColor = color;
}
else {
switch (variant) {
/**
* {@link https://zeroheight.com/3ddd0f892/p/01a397-buttons/t/190120}
*/
case 'primary':
backgroundColor = token_1.shadeBlack;
color = token_1.shadeWhite;
focusColor = color;
focusOutline = "".concat((0, utils_1.rem)(0.2), " solid ").concat((0, alert_1.informative50)(), ";");
hoverBackgroundColor = (0, secondary_1.grey70)();
hoverColor = color;
activeBackgroundColor = (0, secondary_1.grey80)();
activeColor = color;
break;
/**
* {@link https://zeroheight.com/3ddd0f892/p/01a397-buttons/t/06560c}
*/
case 'secondary':
backgroundColor = (0, primary_1.brand60)();
color = token_1.shadeBlack;
focusColor = color;
focusOutline = "".concat((0, utils_1.rem)(0.2), " solid ").concat((0, alert_1.informative50)());
hoverBackgroundColor = (0, primary_1.brand30)();
hoverColor = color;
activeBackgroundColor = (0, primary_1.brand80)();
activeColor = color;
break;
/**
* {@link https://zeroheight.com/3ddd0f892/p/01a397-buttons/t/52ebb4}
*/
case 'tertiary':
backgroundColor = token_1.shadeWhite;
color = token_1.shadeBlack;
focusColor = color;
focusOutline = "".concat((0, utils_1.rem)(0.2), " solid ").concat((0, alert_1.informative50)());
hoverBackgroundColor = (0, secondary_1.grey10)();
hoverColor = token_1.shadeBlack;
activeBackgroundColor = (0, secondary_1.grey20)();
activeColor = color;
break;
/**
* {@link https://zeroheight.com/3ddd0f892/p/01a397-buttons/t/52ebb4}
*/
case 'ghost':
backgroundColor = token_1.shadeWhite;
border = "".concat((0, utils_1.rem)(0.2), " solid ").concat(token_1.shadeBlack, "}");
color = token_1.shadeBlack;
focusColor = color;
focusOutline = "".concat((0, utils_1.rem)(0.2), " solid ").concat((0, alert_1.informative50)());
hoverBackgroundColor = color;
hoverColor = backgroundColor;
activeBackgroundColor = (0, secondary_1.grey80)();
activeColor = backgroundColor;
break;
}
}
return "\n background-color: ".concat(backgroundColor, ";\n border: ").concat(border, ";\n color: ").concat(color, ";\n &:focus {\n color: ").concat(focusColor, ";\n outline: ").concat(focusOutline, ";\n outline-offset: ").concat((0, utils_1.rem)(0.2), ";\n }\n &:hover {\n background-color: ").concat(hoverBackgroundColor, ";\n color: ").concat(hoverColor, ";\n cursor: ").concat(disabled && 'default', ";\n }\n &:active {\n background-color: ").concat(activeBackgroundColor, ";\n color: ").concat(activeColor, ";\n }\n &:visited {\n color: ").concat(color, ";\n }\n // remove focus styles for non-keyboard focus\n :focus:not(:focus-visible) {\n outline: 0;\n }\n ");
}
var templateObject_1;
//# sourceMappingURL=ButtonBase.js.map