How to use the darken function from polished

Find comprehensive JavaScript polished.darken code examples handpicked from public code repositorys.

48
49
50
51
52
53
54
55
56
57
}, function (_a) {
    var theme = _a.theme;
    return theme.white;
}, function (_a) {
    var theme = _a.theme;
    return polished_1.darken(0.1, theme.red1);
});
var Web3StatusConnect = styled_components_1["default"](Web3StatusGeneric)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  font-weight: 500;\n\n  :hover,\n  :focus {\n    border: 1px solid ", ";\n    color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  font-weight: 500;\n\n  :hover,\n  :focus {\n    border: 1px solid ", ";\n    color: ", ";\n  }\n\n  ",
    "\n"])), function (_a) {
    var theme = _a.theme;
fork icon1
star icon0
watch icon1

+ 11 other calls in file

32
33
34
35
36
37
38
39
40
41
}, function (_a) {
    var selected = _a.selected;
    return (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)');
}, function (_a) {
    var selected = _a.selected, theme = _a.theme;
    return (selected ? theme.bg2 : polished_1.darken(0.05, theme.primary1));
});
var LabelRow = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding: 0.75rem 1rem 0 1rem;\n  span:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n"], ["\n  ", "\n  align-items: center;\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding: 0.75rem 1rem 0 1rem;\n  span:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.flexRowNoWrap;
fork icon1
star icon0
watch icon1

54
55
56
57
58
59
60
61
62
63
    ";\n  }\n\n  input {\n    width: 100%;\n    height: 100%;\n    border: 0px;\n    border-radius: 2rem;\n  }\n"])), function (_a) {
    var theme = _a.theme, active = _a.active, warning = _a.warning;
    return active && "1px solid " + (warning ? theme.red1 : theme.primary1);
}, function (_a) {
    var theme = _a.theme, active = _a.active, warning = _a.warning;
    return active && "1px solid " + (warning ? polished_1.darken(0.1, theme.red1) : polished_1.darken(0.1, theme.primary1));
});
var SlippageEmojiContainer = styled_components_1["default"].span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: #f3841e;\n  ", "\n"], ["\n  color: #f3841e;\n  ",
    "\n"])), function (_a) {
    var theme = _a.theme;
fork icon1
star icon0
watch icon1

28
29
30
31
32
33
34
35
36
37
exports.HoverCard = styled_components_1["default"](Card_1["default"])(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  :hover {\n    border: 1px solid ", ";\n  }\n"], ["\n  border: 1px solid ", ";\n  :hover {\n    border: 1px solid ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.bg2;
}, function (_a) {
    var theme = _a.theme;
    return polished_1.darken(0.06, theme.bg2);
});
function MinimalPositionCard(_a) {
    var pair = _a.pair, _b = _a.showUnwrapped, showUnwrapped = _b === void 0 ? false : _b, border = _a.border;
    var account = hooks_1.useActiveWeb3React().account;
fork icon1
star icon0
watch icon1