@fluid-topics/ft-button 1.1.115 → 1.1.117

package/build/ftds-button.styles.js

@@ -88,101 +88,322 @@ export const designSystemStyles = [
             border-radius: 50%;
         }
 
-        /** Primary styles **/
+        /** Brand Primary styles **/
 
-        .ft-button--primary {
-            ${setVariable(FtLoaderCssVariables.color, button.primaryIconColor)};
+        .ftds--family-brand.ft-button--primary {
+            ${setVariable(FtLoaderCssVariables.color, button.primaryBrandIconColor)};
 
-            ${setVariable(FtRippleCssVariables.color, button.primaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.primaryHoverStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.primaryFocusStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.primaryActiveStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.primaryActiveStateLayerOpacity)};
+            ${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.primaryBackgroundColor};
-            color: ${button.primaryColor};
+            background-color: ${button.primaryBrandBackgroundColor};
+            color: ${button.primaryBrandColor};
             border-style: none;
         }
 
-        .ft-button--primary[disabled] {
-            opacity: ${button.primaryDisabledComponentOpacity};
+        .ftds--family-brand.ft-button--primary[disabled] {
+            opacity: ${button.primaryBrandDisabledComponentOpacity};
         }
 
-        .ft-button--primary ft-icon {
-            color: ${button.primaryIconColor};
+        .ftds--family-brand.ft-button--primary ft-icon {
+            color: ${button.primaryBrandIconColor};
         }
 
-        /** Secondary styles **/
+        /** Brand Secondary styles **/
 
-        .ft-button--secondary {
-            ${setVariable(FtLoaderCssVariables.color, button.secondaryIconColor)};
+        .ftds--family-brand.ft-button--secondary {
+            ${setVariable(FtLoaderCssVariables.color, button.secondaryBrandIconColor)};
 
-            ${setVariable(FtRippleCssVariables.color, button.secondaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryHoverStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryFocusStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryActiveStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryActiveStateLayerOpacity)};
+            ${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.secondaryBackgroundColor};
-            color: ${button.secondaryColor};
-            border-color: ${button.secondaryBorderColor};
+            background-color: ${button.secondaryBrandBackgroundColor};
+            color: ${button.secondaryBrandColor};
+            border-color: ${button.secondaryBrandBorderColor};
             border-style: solid;
         }
 
-        .ft-button--secondary[disabled] {
-            opacity: ${button.secondaryDisabledComponentOpacity};
+        .ftds--family-brand.ft-button--secondary[disabled] {
+            opacity: ${button.secondaryBrandDisabledComponentOpacity};
         }
 
-        .ft-button--secondary ft-icon {
-            color: ${button.secondaryIconColor};
+        .ftds--family-brand.ft-button--secondary ft-icon {
+            color: ${button.secondaryBrandIconColor};
         }
 
-        /** Tertiary styles **/
+        /** Brand Tertiary styles **/
 
-        .ft-button--tertiary {
-            ${setVariable(FtLoaderCssVariables.color, button.tertiaryIconColor)};
+        .ftds--family-brand.ft-button--tertiary {
+            ${setVariable(FtLoaderCssVariables.color, button.tertiaryBrandIconColor)};
 
-            ${setVariable(FtRippleCssVariables.color, button.tertiaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryHoverStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryFocusStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryActiveStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryActiveStateLayerOpacity)};
+            ${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.tertiaryBackgroundColor};
-            color: ${button.tertiaryColor};
+            background-color: ${button.tertiaryBrandBackgroundColor};
+            color: ${button.tertiaryBrandColor};
             border-style: none;
         }
 
-        .ft-button--tertiary[disabled] {
-            opacity: ${button.tertiaryDisabledComponentOpacity};
+        .ftds--family-brand.ft-button--tertiary[disabled] {
+            opacity: ${button.tertiaryBrandDisabledComponentOpacity};
         }
 
-        .ft-button--tertiary ft-icon {
-            color: ${button.tertiaryIconColor};
+        .ftds--family-brand.ft-button--tertiary ft-icon {
+            color: ${button.tertiaryBrandIconColor};
         }
 
-        /** Neutral styles **/
+        /** Neutral Secondary styles **/
 
-        .ftds--family-neutral {
-            ${setVariable(FtLoaderCssVariables.color, button.neutralIconColor)};
+        .ftds--family-neutral.ft-button--secondary {
+            ${setVariable(FtLoaderCssVariables.color, button.secondaryNeutralIconColor)};
 
-            ${setVariable(FtRippleCssVariables.backgroundColor, button.neutralStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.neutralHoverStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.neutralFocusStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.neutralActiveStateLayerOpacity)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.neutralActiveStateLayerOpacity)};
+            ${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.neutralBackgroundColor};
-            color: ${button.neutralColor};
+            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-neutral[disabled] {
-            opacity: ${button.neutralDisabledComponentOpacity};
+        .ftds--family-error.ft-button--tertiary[disabled] {
+            opacity: ${button.tertiaryErrorDisabledComponentOpacity};
         }
 
-        .ftds--family-neutral ft-icon {
-            color: ${button.neutralIconColor};
+        .ftds--family-error.ft-button--tertiary ft-icon {
+            color: ${button.tertiaryErrorIconColor};
         }
 
         /** Large styles **/

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-button",
-    "version": "1.1.115",
+    "version": "1.1.117",
     "description": "A generic Fluid Topics tag",
     "keywords": [
         "Lit"
@@ -19,14 +19,14 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "0.0.29",
-        "@fluid-topics/ft-icon": "1.1.115",
-        "@fluid-topics/ft-loader": "1.1.115",
-        "@fluid-topics/ft-ripple": "1.1.115",
-        "@fluid-topics/ft-tooltip": "1.1.115",
-        "@fluid-topics/ft-typography": "1.1.115",
-        "@fluid-topics/ft-wc-utils": "1.1.115",
+        "@fluid-topics/design-system-variables": "0.1.2",
+        "@fluid-topics/ft-icon": "1.1.117",
+        "@fluid-topics/ft-loader": "1.1.117",
+        "@fluid-topics/ft-ripple": "1.1.117",
+        "@fluid-topics/ft-tooltip": "1.1.117",
+        "@fluid-topics/ft-typography": "1.1.117",
+        "@fluid-topics/ft-wc-utils": "1.1.117",
         "lit": "3.1.0"
     },
-    "gitHead": "7a0d8f324bb95d068d787990f2d1f1325399467f"
+    "gitHead": "061a8cebc72403790111ca8292208f4213b84312"
 }