@fluid-topics/ftds-button 2.1.0

package/build/ftds-button.properties.d.ts

@@ -0,0 +1,22 @@
+import { Position } from "@fluid-topics/ft-tooltip";
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon";
+export type HTMLAnchorElementTargetAttribute = "_self" | "_blank" | "_parent" | "_top";
+export interface FtdsButtonProperties {
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+    disabled?: boolean;
+    label?: string;
+    href?: string;
+    target?: HTMLAnchorElementTargetAttribute;
+    icon?: string;
+    iconVariant?: FtdsIconVariants;
+    trailingIcon?: boolean;
+    loading?: boolean;
+    ariaLabel?: string | null;
+    tooltipPosition?: Position;
+    hideTooltip?: boolean;
+    forceTooltip?: boolean;
+    ariaHasPopup?: string | null;
+    ariaPressed?: string | null;
+}

package/build/ftds-button.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-button.styles.d.ts

@@ -0,0 +1,148 @@
+export declare const FtdsButtonCssVariables: {
+    iconOnlyScale: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeBorderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeIconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeFocusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeFocusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeIconOnlyWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumBorderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumIconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumFocusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumFocusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumIconOnlyWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallBorderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallIconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallBorderWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallFocusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallFocusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    smallIconOnlyWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    xSmallHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    xSmallIconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    xSmallFocusOutlineOffset: import("@fluid-topics/design-system-variables").FtCssVariable;
+    xSmallFocusOutlineWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    xSmallIconOnlyWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    roundBorderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    primaryBrandDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    focusFocusRingColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryBrandDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryInfoDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiarySuccessDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryWarningDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryErrorDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    tertiaryNeutralDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryBrandBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryNeutralBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryInfoStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondarySuccessStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryWarningStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorHoverStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorFocusStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorActiveStateLayerOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorDisabledComponentOpacity: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorBackgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorBorderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorIconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    secondaryErrorStateLayerColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const style: import("lit").CSSResult[];

package/build/ftds-button.styles.js

@@ -0,0 +1,485 @@
+import { css } from "lit";
+import { FtCssVariableFactory, 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 { FtdsIconCssVariables } from "@fluid-topics/ftds-icon/build/ftds-icon.styles";
+import { button } from "@fluid-topics/design-system-variables";
+export const FtdsButtonCssVariables = {
+    ...button,
+    iconOnlyScale: FtCssVariableFactory.create("--ftds-button-icon-only-scale", "", "NUMBER", "1"),
+};
+// language=css
+export const style = [
+    css `
+        :host {
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: none;
+        }
+
+        /** Remove default button styles **/
+
+        .ftds-button {
+            box-shadow: 0 0 0 transparent;
+            border: 0 solid transparent;
+            text-shadow: 0 0 0 transparent;
+            text-decoration: none;
+        }
+
+        .ftds-button:hover {
+            box-shadow: 0 0 0 transparent;
+            text-shadow: 0 0 0 transparent;
+        }
+
+        .ftds-button:active {
+            outline: none;
+        }
+
+        .ftds-button:focus {
+            outline: 0;
+        }
+
+        /** Base styles **/
+
+        .ftds-button {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            overflow: hidden;
+            box-sizing: border-box;
+            pointer-events: auto;
+        }
+
+        .ftds-button:not([disabled]):hover {
+            cursor: pointer;
+        }
+
+        .ftds-button:focus {
+            outline: none;
+        }
+
+        .ftds-button:focus-visible {
+            outline-color: ${button.focusFocusRingColor};
+            outline-style: solid;
+        }
+
+        ftds-icon {
+            flex-shrink: 0;
+            position: relative;
+        }
+
+        .ftds-button:not(.ftds-button--trailing-icon) ftds-icon,
+        .ftds-button:not(.ftds-button--trailing-icon) ft-loader {
+            order: -1;
+        }
+
+        .ftds-button--label {
+            position: relative;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: block;
+        }
+
+        .ftds-button--label[hidden] {
+            display: none;
+        }
+
+        .ftds-button.ftds-button--icon-only {
+            padding: unset;
+            border-radius: 50%;
+        }
+
+        .ftds-button.ftds-button--icon-only ftds-icon {
+            transform: scale(${FtdsButtonCssVariables.iconOnlyScale});
+        }
+
+        /** Brand Primary styles **/
+
+        .ftds--family-brand.ftds-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.ftds-button--primary[disabled] {
+            opacity: ${button.primaryBrandDisabledComponentOpacity};
+        }
+
+        .ftds--family-brand.ftds-button--primary ftds-icon {
+            color: ${button.primaryBrandIconColor};
+        }
+
+        /** Brand Secondary styles **/
+
+        .ftds--family-brand.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondaryBrandDisabledComponentOpacity};
+        }
+
+        .ftds--family-brand.ftds-button--secondary ftds-icon {
+            color: ${button.secondaryBrandIconColor};
+        }
+
+        /** Brand Tertiary styles **/
+
+        .ftds--family-brand.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiaryBrandDisabledComponentOpacity};
+        }
+
+        .ftds--family-brand.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiaryBrandIconColor};
+        }
+
+        /** Neutral Secondary styles **/
+
+        .ftds--family-neutral.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondaryNeutralDisabledComponentOpacity};
+        }
+
+        .ftds--family-neutral.ftds-button--secondary ftds-icon {
+            color: ${button.secondaryNeutralIconColor};
+        }
+
+        /** Neutral Tertiary styles **/
+
+        .ftds--family-neutral.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiaryNeutralDisabledComponentOpacity};
+        }
+
+        .ftds--family-neutral.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiaryNeutralIconColor};
+        }
+
+        /** Info Secondary styles **/
+
+        .ftds--family-info.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondaryInfoDisabledComponentOpacity};
+        }
+
+        .ftds--family-info.ftds-button--secondary ftds-icon {
+            color: ${button.secondaryInfoIconColor};
+        }
+
+        /** Info Tertiary styles **/
+
+        .ftds--family-info.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiaryInfoDisabledComponentOpacity};
+        }
+
+        .ftds--family-info.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiaryInfoIconColor};
+        }
+
+        /** Success Secondary styles **/
+
+        .ftds--family-success.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondarySuccessDisabledComponentOpacity};
+        }
+
+        .ftds--family-success.ftds-button--secondary ftds-icon {
+            color: ${button.secondarySuccessIconColor};
+        }
+
+        /** Success Tertiary styles **/
+
+        .ftds--family-success.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiarySuccessDisabledComponentOpacity};
+        }
+
+        .ftds--family-success.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiarySuccessIconColor};
+        }
+
+        /** Warning Secondary styles **/
+
+        .ftds--family-warning.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondaryWarningDisabledComponentOpacity};
+        }
+
+        .ftds--family-warning.ftds-button--secondary ftds-icon {
+            color: ${button.secondaryWarningIconColor};
+        }
+
+        /** Warning Tertiary styles **/
+
+        .ftds--family-warning.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiaryWarningDisabledComponentOpacity};
+        }
+
+        .ftds--family-warning.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiaryWarningIconColor};
+        }
+
+        /** Error Secondary styles **/
+
+        .ftds--family-error.ftds-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.ftds-button--secondary[disabled] {
+            opacity: ${button.secondaryErrorDisabledComponentOpacity};
+        }
+
+        .ftds--family-error.ftds-button--secondary ftds-icon {
+            color: ${button.secondaryErrorIconColor};
+        }
+
+        /** Error Tertiary styles **/
+
+        .ftds--family-error.ftds-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.ftds-button--tertiary[disabled] {
+            opacity: ${button.tertiaryErrorDisabledComponentOpacity};
+        }
+
+        .ftds--family-error.ftds-button--tertiary ftds-icon {
+            color: ${button.tertiaryErrorIconColor};
+        }
+
+        /** Large styles **/
+
+        .ftds--size-large {
+            ${setVariable(FtdsIconCssVariables.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.ftds-button--icon-only {
+            width: ${button.largeIconOnlyWidth};
+        }
+
+        /** Small styles **/
+
+        .ftds--size-medium {
+            ${setVariable(FtdsIconCssVariables.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.ftds-button--icon-only {
+            width: ${button.mediumIconOnlyWidth};
+        }
+
+
+        /** Small styles **/
+
+        .ftds--size-small {
+            ${setVariable(FtdsIconCssVariables.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.ftds-button--icon-only {
+            width: ${button.smallIconOnlyWidth};
+        }
+    `,
+    noTextSelect,
+];

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-button.styles";
+export * from "./ftds-button.properties";
+export * from "./ftds-button";
+import "./define";