@fluid-topics/ft-button 2.0.37 → 2.1.0

package/build/ftds-button.styles.js

@@ -1,485 +0,0 @@
-import { css, } from "lit";
-import { noTextSelect, setVariable, FtCssVariableFactory } 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 const FtdsButtonCssVariables = {
-    ...button,
-    iconOnlyScale: FtCssVariableFactory.create("--ft-button-icon-only-scale", "", "NUMBER", "1"),
-};
-//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%;
-        }
-
-        .ft-button.ft-button--icon-only ft-icon {
-            transform: scale(${FtdsButtonCssVariables.iconOnlyScale});
-        }
-
-        /** 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
-];