@fluid-topics/ft-button 1.1.41 → 1.1.43

package/build/{ft-button.css.js → ft-button.styles.js}

@@ -1,9 +1,9 @@
 import { css, } from "lit";
 import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
-import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
-import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.css";
-import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
+import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
+import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.styles";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
 const buttonColor = FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorPrimary);
 export const FtButtonCssVariables = {
     backgroundColor: FtCssVariableFactory.extend("--ft-button-background-color", "", designSystemVariables.colorSurface),

package/build/ftds-button.js

@@ -8,7 +8,7 @@ import { FtBaseButton } from "./ft-base-button";
 import { property } from "lit/decorators.js";
 import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
 import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
-import { designSystemStyles } from "./ftds-button.css";
+import { designSystemStyles } from "./ftds-button.styles";
 class FtdsButton extends FtBaseButton {
     constructor() {
         super(...arguments);

package/build/{ftds-button.css.js → ftds-button.styles.js}

@@ -1,8 +1,8 @@
 import { css, } from "lit";
 import { noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
-import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.css";
-import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+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
@@ -89,10 +89,10 @@ export const designSystemStyles = [
             ${setVariable(FtLoaderCssVariables.color, button.primaryIconColor)};
 
             ${setVariable(FtRippleCssVariables.color, button.primaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.primaryStateLayerOpacityHover)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.primaryStateLayerOpacityFocus)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.primaryStateLayerOpacityActive)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.primaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.primaryHoverStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.primaryFocusStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.primaryActiveStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.primaryActiveStateLayerOpacity)};
 
             background-color: ${button.primaryBackgroundColor};
             color: ${button.primaryColor};
@@ -100,7 +100,7 @@ export const designSystemStyles = [
         }
 
         .ft-button--primary[disabled] {
-            opacity: ${button.primaryComponentOpacityDisabled};
+            opacity: ${button.primaryDisabledComponentOpacity};
         }
 
         .ft-button--primary ft-icon {
@@ -113,10 +113,10 @@ export const designSystemStyles = [
             ${setVariable(FtLoaderCssVariables.color, button.secondaryIconColor)};
 
             ${setVariable(FtRippleCssVariables.color, button.secondaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryStateLayerOpacityHover)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryStateLayerOpacityFocus)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryStateLayerOpacityActive)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.secondaryHoverStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.secondaryFocusStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.secondaryActiveStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.secondaryActiveStateLayerOpacity)};
 
             background-color: ${button.secondaryBackgroundColor};
             color: ${button.secondaryColor};
@@ -125,7 +125,7 @@ export const designSystemStyles = [
         }
 
         .ft-button--secondary[disabled] {
-            opacity: ${button.secondaryComponentOpacityDisabled};
+            opacity: ${button.secondaryDisabledComponentOpacity};
         }
 
         .ft-button--secondary ft-icon {
@@ -138,10 +138,10 @@ export const designSystemStyles = [
             ${setVariable(FtLoaderCssVariables.color, button.tertiaryIconColor)};
 
             ${setVariable(FtRippleCssVariables.color, button.tertiaryStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryStateLayerOpacityHover)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryStateLayerOpacityFocus)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryStateLayerOpacityActive)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.tertiaryHoverStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.tertiaryFocusStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.tertiaryActiveStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.tertiaryActiveStateLayerOpacity)};
 
             background-color: ${button.tertiaryBackgroundColor};
             color: ${button.tertiaryColor};
@@ -149,7 +149,7 @@ export const designSystemStyles = [
         }
 
         .ft-button--tertiary[disabled] {
-            opacity: ${button.tertiaryComponentOpacityDisabled};
+            opacity: ${button.tertiaryDisabledComponentOpacity};
         }
 
         .ft-button--tertiary ft-icon {
@@ -162,10 +162,10 @@ export const designSystemStyles = [
             ${setVariable(FtLoaderCssVariables.color, button.neutralIconColor)};
 
             ${setVariable(FtRippleCssVariables.backgroundColor, button.neutralStateLayerColor)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.neutralStateLayerOpacityHover)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.neutralStateLayerOpacityFocus)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.neutralStateLayerOpacityActive)};
-            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.neutralStateLayerOpacityActive)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, button.neutralHoverStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, button.neutralFocusStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceSelected, button.neutralActiveStateLayerOpacity)};
+            ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, button.neutralActiveStateLayerOpacity)};
 
             background-color: ${button.neutralBackgroundColor};
             color: ${button.neutralColor};
@@ -173,7 +173,7 @@ export const designSystemStyles = [
         }
 
         .ft-button--neutral[disabled] {
-            opacity: ${button.neutralComponentOpacityDisabled};
+            opacity: ${button.neutralDisabledComponentOpacity};
         }
 
         .ft-button--neutral ft-icon {

package/build/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./ft-button";
-export * from "./ft-button.css";
+export * from "./ft-button.styles";
 export * from "./ft-button.properties";
 export * from "./ftds-button";
-export * from "./ftds-button.css";
+export * from "./ftds-button.styles";
 export * from "./ftds-button.properties";

package/build/index.js

@@ -2,10 +2,10 @@ import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "./ft-button";
 import { FtdsButton } from "./ftds-button";
 export * from "./ft-button";
-export * from "./ft-button.css";
+export * from "./ft-button.styles";
 export * from "./ft-button.properties";
 export * from "./ftds-button";
-export * from "./ftds-button.css";
+export * from "./ftds-button.styles";
 export * from "./ftds-button.properties";
 customElement("ft-button")(FtButton);
 customElement("ftds-button")(FtdsButton);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-button",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "A generic Fluid Topics tag",
   "keywords": [
     "Lit"
@@ -19,13 +19,13 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.1.41",
-    "@fluid-topics/ft-loader": "1.1.41",
-    "@fluid-topics/ft-ripple": "1.1.41",
-    "@fluid-topics/ft-tooltip": "1.1.41",
-    "@fluid-topics/ft-typography": "1.1.41",
-    "@fluid-topics/ft-wc-utils": "1.1.41",
+    "@fluid-topics/ft-icon": "1.1.43",
+    "@fluid-topics/ft-loader": "1.1.43",
+    "@fluid-topics/ft-ripple": "1.1.43",
+    "@fluid-topics/ft-tooltip": "1.1.43",
+    "@fluid-topics/ft-typography": "1.1.43",
+    "@fluid-topics/ft-wc-utils": "1.1.43",
     "lit": "3.1.0"
   },
-  "gitHead": "9842020c30f172387107ab92ffa3d2c5a33edce6"
+  "gitHead": "c6f6bcb506f87c05a46c67d364abc285eec41894"
 }