@patreon/studio/module/utilities/color-mix/index.js

Patreon Studio Design System

import { css } from 'styled-components';
/**
 * Modifies a color token with an opacity value using the oklab color space.
 *
 * @warning This requires the browser to support the color-mix css function.
 * Use `@supports` to progressively enhance the experience.
 */
export function tokenWithOpacity(token, opacity) {
    return `color-mix(in srgb, ${token}, transparent ${(1 - opacity) * 100}%)`;
}
/**
 * Wraps a user css block with a helper to add transparency to a color token
 * when supported and a fallback when not.
 */
export function cssWithTransparentToken(userCss) {
    return css `
    // when color-mix is not supported, we need to use a transparent fallback
    ${userCss(() => 'transparent')}

    @supports (color: color-mix(in srgb, var(--color), transparent)) {
      // when color-mix is supported, we can use it to modify the color
      ${userCss((token) => tokenWithOpacity(token, 0))}
    }
  `;
}
//# sourceMappingURL=index.js.map