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

A generic Fluid Topics tag

import { css, } from "lit";
import { noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.styles";
import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
import { button } from "@fluid-topics/design-system-variables";
export { button as FtdsButtonCssVariables } from "@fluid-topics/design-system-variables";
//language=css
export const designSystemStyles = [
    css `
        :host {
            display: inline-block;
            max-width: 100%;
            pointer-events: none;
        }

        /** Remove default button styles **/

        .ft-button {
            box-shadow: 0 0 0 transparent;
            border: 0 solid transparent;
            text-shadow: 0 0 0 transparent;
            text-decoration: none;
        }

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

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

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

        /** Base styles **/

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

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

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

        .ft-button:focus-visible {
            outline-color: ${button.focusFocusRingColor};
            outline-style: solid;
        }

        ft-icon {
            flex-shrink: 0;
            position: relative;
        }

        .ft-button:not(.ft-button--trailing-icon) ft-icon,
        .ft-button:not(.ft-button--trailing-icon) ft-loader {
            order: -1;
        }

        .ft-button--label {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
        }

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

        .ft-button.ft-button--icon-only {
            padding: unset;
            border-radius: 50%;
        }

        /** Brand Primary styles **/

        .ftds--family-brand.ft-button--primary {
            ${setVariable(FtLoaderCssVariables.color, button.primaryBrandIconColor)};

            ${setVariable(FtRippleCssVariables.color, button.primaryBrandStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.primaryBrandHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.primaryBrandFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.primaryBrandActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.primaryBrandActiveStateLayerOpacity)};

            background-color: ${button.primaryBrandBackgroundColor};
            color: ${button.primaryBrandColor};
            border-style: none;
        }

        .ftds--family-brand.ft-button--primary[disabled] {
            opacity: ${button.primaryBrandDisabledComponentOpacity};
        }

        .ftds--family-brand.ft-button--primary ft-icon {
            color: ${button.primaryBrandIconColor};
        }

        /** Brand Secondary styles **/

        .ftds--family-brand.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondaryBrandIconColor)};

            ${setVariable(FtRippleCssVariables.color, button.secondaryBrandStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryBrandHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryBrandFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryBrandActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryBrandActiveStateLayerOpacity)};

            background-color: ${button.secondaryBrandBackgroundColor};
            color: ${button.secondaryBrandColor};
            border-color: ${button.secondaryBrandBorderColor};
            border-style: solid;
        }

        .ftds--family-brand.ft-button--secondary[disabled] {
            opacity: ${button.secondaryBrandDisabledComponentOpacity};
        }

        .ftds--family-brand.ft-button--secondary ft-icon {
            color: ${button.secondaryBrandIconColor};
        }

        /** Brand Tertiary styles **/

        .ftds--family-brand.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiaryBrandIconColor)};

            ${setVariable(FtRippleCssVariables.color, button.tertiaryBrandStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryBrandHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryBrandFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryBrandActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryBrandActiveStateLayerOpacity)};

            background-color: ${button.tertiaryBrandBackgroundColor};
            color: ${button.tertiaryBrandColor};
            border-style: none;
        }

        .ftds--family-brand.ft-button--tertiary[disabled] {
            opacity: ${button.tertiaryBrandDisabledComponentOpacity};
        }

        .ftds--family-brand.ft-button--tertiary ft-icon {
            color: ${button.tertiaryBrandIconColor};
        }

        /** Neutral Secondary styles **/

        .ftds--family-neutral.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondaryNeutralIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.secondaryNeutralStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryNeutralHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryNeutralFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryNeutralActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryNeutralActiveStateLayerOpacity)};

            background-color: ${button.secondaryNeutralBackgroundColor};
            color: ${button.secondaryNeutralColor};
            border-color: ${button.secondaryNeutralBorderColor};
            border-style: solid;
        }

        .ftds--family-neutral.ft-button--secondary[disabled] {
            opacity: ${button.secondaryNeutralDisabledComponentOpacity};
        }

        .ftds--family-neutral.ft-button--secondary ft-icon {
            color: ${button.secondaryNeutralIconColor};
        }

        /** Neutral Tertiary styles **/

        .ftds--family-neutral.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiaryNeutralIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.tertiaryNeutralStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryNeutralHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryNeutralFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryNeutralActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryNeutralActiveStateLayerOpacity)};

            background-color: ${button.tertiaryNeutralBackgroundColor};
            color: ${button.tertiaryNeutralColor};
            border-style: none;
        }

        .ftds--family-neutral.ft-button--tertiary[disabled] {
            opacity: ${button.tertiaryNeutralDisabledComponentOpacity};
        }

        .ftds--family-neutral.ft-button--tertiary ft-icon {
            color: ${button.tertiaryNeutralIconColor};
        }

        /** Info Secondary styles **/

        .ftds--family-info.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondaryInfoIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.secondaryInfoStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryInfoHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryInfoFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryInfoActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryInfoActiveStateLayerOpacity)};

            background-color: ${button.secondaryInfoBackgroundColor};
            color: ${button.secondaryInfoColor};
            border-color: ${button.secondaryInfoBorderColor};
            border-style: solid;
        }

        .ftds--family-info.ft-button--secondary[disabled] {
            opacity: ${button.secondaryInfoDisabledComponentOpacity};
        }

        .ftds--family-info.ft-button--secondary ft-icon {
            color: ${button.secondaryInfoIconColor};
        }

        /** Info Tertiary styles **/

        .ftds--family-info.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiaryInfoIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.tertiaryInfoStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryInfoHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryInfoFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryInfoActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryInfoActiveStateLayerOpacity)};

            background-color: ${button.tertiaryInfoBackgroundColor};
            color: ${button.tertiaryInfoColor};
            border-style: none;
        }

        .ftds--family-info.ft-button--tertiary[disabled] {
            opacity: ${button.tertiaryInfoDisabledComponentOpacity};
        }

        .ftds--family-info.ft-button--tertiary ft-icon {
            color: ${button.tertiaryInfoIconColor};
        }

        /** Success Secondary styles **/

        .ftds--family-success.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondarySuccessIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.secondarySuccessStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondarySuccessHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondarySuccessFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondarySuccessActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondarySuccessActiveStateLayerOpacity)};

            background-color: ${button.secondarySuccessBackgroundColor};
            color: ${button.secondarySuccessColor};
            border-color: ${button.secondarySuccessBorderColor};
            border-style: solid;
        }

        .ftds--family-success.ft-button--secondary[disabled] {
            opacity: ${button.secondarySuccessDisabledComponentOpacity};
        }

        .ftds--family-success.ft-button--secondary ft-icon {
            color: ${button.secondarySuccessIconColor};
        }

        /** Success Tertiary styles **/

        .ftds--family-success.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiarySuccessIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.tertiarySuccessStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiarySuccessHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiarySuccessFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiarySuccessActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiarySuccessActiveStateLayerOpacity)};

            background-color: ${button.tertiarySuccessBackgroundColor};
            color: ${button.tertiarySuccessColor};
            border-style: none;
        }

        .ftds--family-success.ft-button--tertiary[disabled] {
            opacity: ${button.tertiarySuccessDisabledComponentOpacity};
        }

        .ftds--family-success.ft-button--tertiary ft-icon {
            color: ${button.tertiarySuccessIconColor};
        }

        /** Warning Secondary styles **/

        .ftds--family-warning.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondaryWarningIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.secondaryWarningStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryWarningHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryWarningFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryWarningActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryWarningActiveStateLayerOpacity)};

            background-color: ${button.secondaryWarningBackgroundColor};
            color: ${button.secondaryWarningColor};
            border-color: ${button.secondaryWarningBorderColor};
            border-style: solid;
        }

        .ftds--family-warning.ft-button--secondary[disabled] {
            opacity: ${button.secondaryWarningDisabledComponentOpacity};
        }

        .ftds--family-warning.ft-button--secondary ft-icon {
            color: ${button.secondaryWarningIconColor};
        }

        /** Warning Tertiary styles **/

        .ftds--family-warning.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiaryWarningIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.tertiaryWarningStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryWarningHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryWarningFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryWarningActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryWarningActiveStateLayerOpacity)};

            background-color: ${button.tertiaryWarningBackgroundColor};
            color: ${button.tertiaryWarningColor};
            border-style: none;
        }

        .ftds--family-warning.ft-button--tertiary[disabled] {
            opacity: ${button.tertiaryWarningDisabledComponentOpacity};
        }

        .ftds--family-warning.ft-button--tertiary ft-icon {
            color: ${button.tertiaryWarningIconColor};
        }

        /** Error Secondary styles **/

        .ftds--family-error.ft-button--secondary {
            ${setVariable(FtLoaderCssVariables.color, button.secondaryErrorIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.secondaryErrorStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryErrorHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryErrorFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryErrorActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryErrorActiveStateLayerOpacity)};

            background-color: ${button.secondaryErrorBackgroundColor};
            color: ${button.secondaryErrorColor};
            border-color: ${button.secondaryErrorBorderColor};
            border-style: solid;
        }

        .ftds--family-error.ft-button--secondary[disabled] {
            opacity: ${button.secondaryErrorDisabledComponentOpacity};
        }

        .ftds--family-error.ft-button--secondary ft-icon {
            color: ${button.secondaryErrorIconColor};
        }

        /** Error Tertiary styles **/

        .ftds--family-error.ft-button--tertiary {
            ${setVariable(FtLoaderCssVariables.color, button.tertiaryErrorIconColor)};

            ${setVariable(FtRippleCssVariables.backgroundColor, button.tertiaryErrorStateLayerColor)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryErrorHoverStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryErrorFocusStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryErrorActiveStateLayerOpacity)};
            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryErrorActiveStateLayerOpacity)};

            background-color: ${button.tertiaryErrorBackgroundColor};
            color: ${button.tertiaryErrorColor};
            border-style: none;
        }

        .ftds--family-error.ft-button--tertiary[disabled] {
            opacity: ${button.tertiaryErrorDisabledComponentOpacity};
        }

        .ftds--family-error.ft-button--tertiary ft-icon {
            color: ${button.tertiaryErrorIconColor};
        }

        /** Large styles **/

        .ftds--size-large {
            ${setVariable(FtIconCssVariables.size, button.largeIconSize)};
            ${setVariable(FtLoaderCssVariables.size, button.largeIconSize)};

            height: ${button.largeHeight};
            padding: 0 ${button.largeHorizontalPadding};
            gap: ${button.largeGap};
            border-radius: ${button.largeBorderRadius};
            border-width: ${button.largeBorderWidth};
        }

        .ftds--size-large:focus-visible {
            outline-width: ${button.largeFocusOutlineWidth};
            outline-offset: ${button.largeFocusOutlineOffset};
        }

        .ftds--size-large.ft-button--icon-only {
            width: ${button.largeIconOnlyWidth};
        }

        /** Small styles **/

        .ftds--size-medium {
            ${setVariable(FtIconCssVariables.size, button.mediumIconSize)};
            ${setVariable(FtLoaderCssVariables.size, button.mediumIconSize)};

            height: ${button.mediumHeight};
            padding: 0 ${button.mediumHorizontalPadding};
            gap: ${button.mediumGap};
            border-radius: ${button.mediumBorderRadius};
            border-width: ${button.mediumBorderWidth};
        }

        .ftds--size-medium:focus-visible {
            outline-width: ${button.mediumFocusOutlineWidth};
            outline-offset: ${button.mediumFocusOutlineOffset};
        }

        .ftds--size-medium.ft-button--icon-only {
            width: ${button.mediumIconOnlyWidth};
        }


        /** Small styles **/

        .ftds--size-small {
            ${setVariable(FtIconCssVariables.size, button.smallIconSize)};
            ${setVariable(FtLoaderCssVariables.size, button.smallIconSize)};

            height: ${button.smallHeight};
            padding: 0 ${button.smallHorizontalPadding};
            gap: ${button.smallGap};
            border-radius: ${button.smallBorderRadius};
            border-width: ${button.smallBorderWidth};
        }

        .ftds--size-small:focus-visible {
            outline-width: ${button.smallFocusOutlineWidth};
            outline-offset: ${button.smallFocusOutlineOffset};
        }

        .ftds--size-small.ft-button--icon-only {
            width: ${button.smallIconOnlyWidth};
        }
    `,
    noTextSelect
];