@fluid-topics/ft-ripple/build/ft-ripple.styles.js

A custom Fluid Topics ripple component

import { css } from "lit";
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
const colorCssVar = FtCssVariableFactory.extend("--ft-ripple-color", "", designSystemVariables.colorContent);
export const FtRippleCssVariables = {
    color: colorCssVar,
    backgroundColor: FtCssVariableFactory.extend("--ft-ripple-background-color", "", colorCssVar),
    opacityContentOnSurfacePressed: FtCssVariableFactory.external(designSystemVariables.opacityContentOnSurfacePressed, "Design system"),
    opacityContentOnSurfaceHover: FtCssVariableFactory.external(designSystemVariables.opacityContentOnSurfaceHover, "Design system"),
    opacityContentOnSurfaceFocused: FtCssVariableFactory.external(designSystemVariables.opacityContentOnSurfaceFocused, "Design system"),
    opacityContentOnSurfaceSelected: FtCssVariableFactory.external(designSystemVariables.opacityContentOnSurfaceSelected, "Design system"),
    borderRadius: FtCssVariableFactory.create("--ft-ripple-border-radius", "", "SIZE", "0px")
};
const primaryColorCssVar = FtCssVariableFactory.extend("--ft-ripple-color", "", designSystemVariables.colorPrimary);
export const FtRipplePrimaryCssVariables = {
    color: primaryColorCssVar,
    backgroundColor: FtCssVariableFactory.extend("--ft-ripple-background-color", "", primaryColorCssVar),
};
const secondaryColorCssVar = FtCssVariableFactory.extend("--ft-ripple-color", "", designSystemVariables.colorSecondary);
export const FtRippleSecondaryCssVariables = {
    color: secondaryColorCssVar,
    backgroundColor: FtCssVariableFactory.extend("--ft-ripple-background-color", "", secondaryColorCssVar),
};
//language=css
export const styles = css `
    :host {
        display: contents;
    }

    .ft-ripple {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .ft-ripple:not(.ft-ripple--unbounded) {
        overflow: hidden;
        border-radius: ${FtRippleCssVariables.borderRadius};
    }

    .ft-ripple .ft-ripple--background,
    .ft-ripple .ft-ripple--effect {
        position: absolute;
        opacity: 0;
    }

    .ft-ripple .ft-ripple--effect {
        aspect-ratio: 1;
        width: auto;
        height: auto;
        min-width: 170%;
        min-height: 170%;
    }

    .ft-ripple .ft-ripple--background{
        width: 100%;
        height: 100%;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        aspect-ratio: 1;
        width: auto;
        height: auto;
        max-width: unset;
        max-height: unset;
        min-width: 100%;
        min-height: 100%;
    }

    .ft-ripple .ft-ripple--background {
        background-color: ${FtRippleCssVariables.backgroundColor};
    }

    .ft-ripple .ft-ripple--effect {
        background-color: ${FtRippleCssVariables.color};
    }

    .ft-ripple.ft-ripple--secondary .ft-ripple--background {
        background-color: ${FtRippleSecondaryCssVariables.backgroundColor};
    }

    .ft-ripple.ft-ripple--secondary .ft-ripple--effect {
        background-color: ${FtRippleSecondaryCssVariables.color};
    }

    .ft-ripple.ft-ripple--primary .ft-ripple--background {
        background-color: ${FtRipplePrimaryCssVariables.backgroundColor};
    }

    .ft-ripple.ft-ripple--primary .ft-ripple--effect {
        background-color: ${FtRipplePrimaryCssVariables.color};
    }

    .ft-ripple .ft-ripple--background {
        top: 0;
        left: 0;
        transition: opacity 75ms linear;
    }

    .ft-ripple .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        border-radius: 50%;
    }

    .ft-ripple .ft-ripple--effect {
        transform: translate(-50%, -50%) scale(0.15);
        transition: transform 300ms ease, opacity 75ms linear;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        left: 50%;
        top: 50%;
    }

    .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
        transform: translate(-50%, -50%);
    }

    .ft-ripple.ft-ripple--hovered .ft-ripple--background {
        opacity: ${FtRippleCssVariables.opacityContentOnSurfaceHover};
    }

    .ft-ripple.ft-ripple--selected .ft-ripple--background {
        opacity: ${FtRippleCssVariables.opacityContentOnSurfaceSelected};
    }

    .ft-ripple.ft-ripple--focused .ft-ripple--background {
        opacity: ${FtRippleCssVariables.opacityContentOnSurfaceFocused};
    }

    .ft-ripple.ft-ripple--pressed .ft-ripple--effect {
        opacity: ${FtRippleCssVariables.opacityContentOnSurfacePressed};
        transform: translate(-50%, -50%) scale(1);
    }
`;