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

A generic Fluid Topics tag

import { css, } from "lit";
import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.styles";
import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
const buttonColor = FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorPrimary);
export const FtButtonCssVariables = {
    backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", "", designSystemVariables.colorSurface),
    borderRadius: FtCssVariableFactory.extend("--ft-button-border-radius", "", designSystemVariables.borderRadiusL),
    color: buttonColor,
    fontSize: FtCssVariableFactory.extend("--ft-button-font-size", "", FtTypographyButtonCssVariables.fontSize),
    iconSize: FtCssVariableFactory.create("--ft-button-icon-size", "", "SIZE", "24px"),
    rippleColor: FtCssVariableFactory.extend("--ft-button-ripple-color", "", buttonColor),
    verticalPadding: FtCssVariableFactory.create("--ft-button-vertical-padding", "", "SIZE", "6px"),
    horizontalPadding: FtCssVariableFactory.create("--ft-button-horizontal-padding", "", "SIZE", "8px"),
    iconPadding: FtCssVariableFactory.create("--ft-button-icon-padding", "", "SIZE", "8px"),
    opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system")
};
const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", "", FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorOnPrimary));
export const FtButtonPrimaryCssVariables = {
    backgroundColor: FtCssVariableFactory.extend("--ft-button-primary-background-color", "", FtCssVariableFactory.extend("--ft-button-background-color", "", designSystemVariables.colorPrimary)),
    color: buttonPrimaryColor,
    rippleColor: FtCssVariableFactory.extend("--ft-button-primary-ripple-color", "", buttonPrimaryColor),
};
export const FtButtonDenseCssVariables = {
    borderRadius: FtCssVariableFactory.extend("--ft-button-dense-border-radius", "", FtCssVariableFactory.extend("--ft-button-border-radius", "", designSystemVariables.borderRadiusM)),
    verticalPadding: FtCssVariableFactory.create("--ft-button-dense-vertical-padding", "", "SIZE", "2px"),
    horizontalPadding: FtCssVariableFactory.create("--ft-button-dense-horizontal-padding", "", "SIZE", "4px"),
    iconPadding: FtCssVariableFactory.create("--ft-button-dense-icon-padding", "", "SIZE", "4px"),
};
//language=css
export const classicStyles = [
    css `
        :host {
            display: inline-block;
            max-width: 100%;
            pointer-events: none;
        }

        .ft-button {
            box-shadow: 0px 0px 0px transparent;
            border: 0px solid transparent;
            text-shadow: 0px 0px 0px transparent;
            font-size: ${FtButtonCssVariables.fontSize};
            text-decoration: none;
        }

        .ft-button:hover {
            box-shadow: 0px 0px 0px transparent;
            border: 0px solid transparent;
            text-shadow: 0px 0px 0px transparent;
        }

        .ft-button:active {
            outline: none;
            border: none;
        }

        .ft-button:focus {
            outline: 0;
        }

        .ft-button {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            border: none;
            pointer-events: auto;

            --ft-button-internal-line-height: max(calc(${FtButtonCssVariables.fontSize} + 2px), ${FtButtonCssVariables.iconSize});
            --ft-button-internal-color: ${FtButtonCssVariables.color};
            ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
            ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};

            border-radius: ${FtButtonCssVariables.borderRadius};
            padding: ${FtButtonCssVariables.verticalPadding} ${FtButtonCssVariables.horizontalPadding};
            background-color: ${FtButtonCssVariables.backgroundColor};
            color: var(--ft-button-internal-color);
            -webkit-mask-image: radial-gradient(white, black);
        }

        .ft-button.ft-button--outlined {
            border: 1px solid var(--ft-button-internal-color);
            padding: calc(${FtButtonCssVariables.verticalPadding} - 1px) calc(${FtButtonCssVariables.horizontalPadding} - 1px);
        }

        .ft-button.ft-button--dense {
            padding: ${FtButtonDenseCssVariables.verticalPadding} ${FtButtonDenseCssVariables.horizontalPadding};
            border-radius: ${FtButtonDenseCssVariables.borderRadius};
            gap: ${FtButtonDenseCssVariables.iconPadding};
        }

        .ft-button.ft-button--dense.ft-button--outlined {
            padding: calc(${FtButtonDenseCssVariables.verticalPadding} - 1px) calc(${FtButtonDenseCssVariables.horizontalPadding} - 1px);
        }

        .ft-button:not([disabled]):hover {
            cursor: pointer;
        }

        .ft-button--round {
            border-radius: calc(var(--ft-button-internal-line-height) / 2 + ${FtButtonCssVariables.verticalPadding});
        }

        .ft-button--round.ft-button--dense {
            border-radius: calc(var(--ft-button-internal-line-height) / 2 + ${FtButtonDenseCssVariables.verticalPadding});
        }

        .ft-button[disabled] {
            filter: grayscale(1);
            opacity: ${FtButtonCssVariables.opacityDisabled};
        }

        .ft-button.ft-button--primary {
            background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
            --ft-button-internal-color: ${FtButtonPrimaryCssVariables.color};
            ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
        }

        .ft-button:focus {
            outline: none;
        }

        .ft-button--label {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            margin: 0 ${FtButtonCssVariables.iconPadding};
            ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
            ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-button-internal-line-height)")};
        }

        .ft-button--dense .ft-button--label {
            margin: 0 ${FtButtonDenseCssVariables.iconPadding};
        }

        .ft-button--label[hidden] {
            display: none;
        }

        [part="icon"] {
            flex-shrink: 0;
            position: relative;
        }

        .ft-button--label[hidden] + [part="icon"] {
            margin: 0 calc(${FtButtonCssVariables.horizontalPadding} * -1);
            padding: 0 ${FtButtonCssVariables.verticalPadding};
        }

        .ft-button--dense .ft-button--label[hidden] + [part="icon"] {
            margin: 0 calc(${FtButtonDenseCssVariables.horizontalPadding} * -1);
            padding: 0 ${FtButtonDenseCssVariables.verticalPadding};
        }

        .ft-button:not(.ft-button--trailing-icon) [part="label"]{
            order: 2;
        }

        ft-loader {
            ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
            ${setVariable(FtLoaderCssVariables.color, "var(--ft-button-internal-color)")};
        }
    `,
    noTextSelect
];