@littlespoon/link
Version:
50 lines • 3.12 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkDisabled = exports.LinkBase = 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 styled_components_1 = __importDefault(require("styled-components"));
var Link_1 = require("./Link");
/**
* {@link https://zeroheight.com/3ddd0f892/p/1026a1-link/b/375553}
*/
exports.LinkBase = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n &:visited {\n color: ", ";\n }\n &:hover {\n color: ", ";\n }\n &:focus {\n border-radius: 0.2rem;\n outline: 0.2rem solid ", ";\n outline-offset: 0.2rem;\n }\n // Remove focus styles for non-keyboard focus\n &:focus:not(:focus-visible) {\n outline: 0;\n }\n ", "\n"], ["\n color: ", ";\n font-family: ", ";\n &:visited {\n color: ", ";\n }\n &:hover {\n color: ", ";\n }\n &:focus {\n border-radius: 0.2rem;\n outline: 0.2rem solid ", ";\n outline-offset: 0.2rem;\n }\n // Remove focus styles for non-keyboard focus\n &:focus:not(:focus-visible) {\n outline: 0;\n }\n ", "\n"])), token_1.shadeBlack, primary_2.family, (0, primary_1.brand80)(), (0, secondary_1.grey70)(), (0, alert_1.informative50)(), getUnderlineCss);
exports.LinkDisabled = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n font-family: ", ";\n ", "\n"], ["\n color: ", ";\n cursor: not-allowed;\n font-family: ", ";\n ", "\n"
/**
* Gets underline styles.
*/
])), (0, secondary_1.grey20)(), primary_2.family, getUnderlineCss);
/**
* Gets underline styles.
*/
function getUnderlineCss(props) {
var textDecoration = '';
var textDecorationHover = '';
switch (props.underline) {
case Link_1.LinkUnderline.NONE:
textDecoration = 'none';
textDecorationHover = 'none';
break;
case Link_1.LinkUnderline.HOVER:
textDecoration = 'none';
textDecorationHover = 'underline';
break;
default:
textDecoration = 'underline';
textDecorationHover = 'underline';
break;
}
return "\n text-decoration: ".concat(textDecoration, ";\n &:hover {\n text-decoration: ").concat(textDecorationHover, ";\n }\n ");
}
var templateObject_1, templateObject_2;
//# sourceMappingURL=LinkBase.js.map