How to use the transparentize function from polished

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

In the Polished library for JavaScript, the polished.transparentize function is used to create a new color that is a specified percentage more transparent than a given color.

RefIndicator.js

61
62
63
64
65
66
67
68
69
70
outline: 'none',
border: '1px solid transparent',
borderRadius: '100%',
cursor: 'pointer',
color: theme.base === 'light'
    ? polished_1.transparentize(0.3, theme.color.defaultText)
    : polished_1.transparentize(0.6, theme.color.defaultText),
'&:hover': {
    color: theme.barSelectedColor,
},

+ 7 other calls in file

Refs.js

GitHub: jschuler/pf-storybook

47
48
49
50
51
52
53
54
55
56
    background: 'transparent',
    width: '100%',
    marginTop: 20,
    paddingTop: 16,
    borderTop: `1px solid ${theme.appBorderColor}`,
    color: theme.base === 'light' ? theme.color.defaultText : polished_1.transparentize(0.2, theme.color.defaultText),
}));
const RefTitle = theming_1.styled.span(({ theme }) => ({
    display: 'block',
    textOverflow: 'ellipsis',

How does polished.transparentize work?

polished.transparentize is a function in the Polished library for JavaScript that creates a new color that is a specified percentage more transparent than a given color.

When polished.transparentize is called with a color and a percentage as input, it performs the following operations:

It parses the input color using the Polished parseToRgb function, which converts the color to an RGB format.
It calculates the alpha value for the new color by subtracting the specified percentage from the original color's alpha value.
It returns a new color with the same RGB values as the original color and the calculated alpha value.

By using polished.transparentize, developers can easily create new colors that are more transparent than existing colors, which can be useful for creating subtle visual effects or implementing color schemes. Note that polished.transparentize may not work as expected with certain types of colors or percentages, so it is important to test thoroughly before using it in production code.

index.js

GitHub: orangemio/panda-interface

171
172
173
174
175
176
177
178
    ";\n}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.text1;
}, function (_a) {
    var theme = _a.theme;
    return "radial-gradient(50% 50% at 50% 50%, " + theme.primary5 + " 0%, " + polished_1.transparentize(1, theme.primary4) + " 100%)";
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

TreeNode.js

GitHub: jschuler/pf-storybook

25
26
27
28
29
30
31
32
33
34
width: 0,
height: 0,
marginTop: 6,
marginLeft: 8,
marginRight: 5,
color: polished_1.transparentize(0.4, theme.color.mediumdark),
borderTop: '3px solid transparent',
borderBottom: '3px solid transparent',
borderLeft: `3px solid`,
transform: isExpanded ? 'rotateZ(90deg)' : 'none',

Ai Example

1
2
3
4
5
6
7
const polished = require("polished");

// Creating a new color that is 50% more transparent than a given color
const color = "#4286f4";
const newColor = polished.transparentize(0.5, color);

console.log(newColor); // Outputs: rgba(66, 134, 244, 0.5)

In this example, we're using polished.transparentize to create a new color that is 50% more transparent than the color "#4286f4". The resulting color, rgba(66, 134, 244, 0.5), has the same RGB values as the original color but with an alpha value of 0.5. Note that in this example, we're passing the transparency percentage (0.5) before the color (color) to polished.transparentize. The order of arguments is important in this function, as it expects the percentage to come first followed by the color.

index.cjs.js

GitHub: mucahidyazar/ui-library

988
989
990
991
992
993
994
995
996
997
  componentId: "sc-1it1uc2-0"
})(["font-weight:500;margin-bottom:0.4rem;"]);
var StyledInput = styled__default['default'].input.withConfig({
  displayName: "style__StyledInput",
  componentId: "sc-1it1uc2-1"
})(["display:block;width:100%;padding:0.5rem 0.4rem;font-size:1rem;line-height:1.5;color:", ";background-color:transparent;border:1px solid ", ";appearance:none;border-radius:0;transition:all 0.15s ease-in-out;&:focus{outline:none;border-color:", ";box-shadow:0 0 0 0.2rem ", ";}&:disabled{background-color:", ";opacity:", ";}"], SECONDARY_TEXT_COLOR, SECONDARY_COLOR, PRIMARY_COLOR, polished.transparentize(0.75, PRIMARY_COLOR), SECONDARY_COLOR, DISABLED_OPACITY);
var StyledTextarea = styled__default['default'](StyledInput).attrs({
  as: 'textarea'
}).withConfig({
  displayName: "style__StyledTextarea",

Other functions in polished

Sorted by popularity

polished.transparentize is the most popular function in polished (17 examples)

Other popular packages:

Home

About