@fluid-topics/ft-button 1.3.15 → 1.3.17

package/build/ft-button.styles.js

@@ -1,4 +1,4 @@
-import { css, } from "lit";
+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.styles";
 import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
@@ -15,7 +15,7 @@ export const FtButtonCssVariables = {
     verticalPadding: FtCssVariableFactory.create("--ft-button-vertical-padding", "", "SIZE", "6px"),
     horizontalPadding: FtCssVariableFactory.create("--ft-button-horizontal-padding", "", "SIZE", "8px"),
     iconPadding: FtCssVariableFactory.create("--ft-button-icon-padding", "", "SIZE", "8px"),
-    opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system")
+    opacityDisabled: FtCssVariableFactory.external(designSystemVariables.colorOpacityDisabled, "Design system"),
 };
 const buttonPrimaryColor = FtCssVariableFactory.extend("--ft-button-primary-color", "", FtCssVariableFactory.extend("--ft-button-color", "", designSystemVariables.colorOnPrimary));
 export const FtButtonPrimaryCssVariables = {
@@ -29,7 +29,6 @@ export const FtButtonDenseCssVariables = {
     horizontalPadding: FtCssVariableFactory.create("--ft-button-dense-horizontal-padding", "", "SIZE", "4px"),
     iconPadding: FtCssVariableFactory.create("--ft-button-dense-icon-padding", "", "SIZE", "4px"),
 };
-//language=css
 export const classicStyles = [
     css `
         :host {
@@ -72,20 +71,20 @@ export const classicStyles = [
             border: none;
             pointer-events: auto;
 
-            --ft-button-internal-line-height: max(calc(${FtButtonCssVariables.fontSize} + 2px), ${FtButtonCssVariables.iconSize});
-            --ft-button-internal-color: ${FtButtonCssVariables.color};
+            --button-internal-line-height: max(calc(${FtButtonCssVariables.fontSize} + 2px), ${FtButtonCssVariables.iconSize});
+            --button-internal-color: ${FtButtonCssVariables.color};
             ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
             ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
 
             border-radius: ${FtButtonCssVariables.borderRadius};
             padding: ${FtButtonCssVariables.verticalPadding} ${FtButtonCssVariables.horizontalPadding};
             background-color: ${FtButtonCssVariables.backgroundColor};
-            color: var(--ft-button-internal-color);
+            color: var(--button-internal-color);
             -webkit-mask-image: radial-gradient(white, black);
         }
 
         .ft-button.ft-button--outlined {
-            border: 1px solid var(--ft-button-internal-color);
+            border: 1px solid var(--button-internal-color);
             padding: calc(${FtButtonCssVariables.verticalPadding} - 1px) calc(${FtButtonCssVariables.horizontalPadding} - 1px);
         }
 
@@ -104,11 +103,11 @@ export const classicStyles = [
         }
 
         .ft-button--round {
-            border-radius: calc(var(--ft-button-internal-line-height) / 2 + ${FtButtonCssVariables.verticalPadding});
+            border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonCssVariables.verticalPadding});
         }
 
         .ft-button--round.ft-button--dense {
-            border-radius: calc(var(--ft-button-internal-line-height) / 2 + ${FtButtonDenseCssVariables.verticalPadding});
+            border-radius: calc(var(--button-internal-line-height) / 2 + ${FtButtonDenseCssVariables.verticalPadding});
         }
 
         .ft-button[disabled] {
@@ -118,7 +117,7 @@ export const classicStyles = [
 
         .ft-button.ft-button--primary {
             background-color: ${FtButtonPrimaryCssVariables.backgroundColor};
-            --ft-button-internal-color: ${FtButtonPrimaryCssVariables.color};
+            --button-internal-color: ${FtButtonPrimaryCssVariables.color};
             ${setVariable(FtRippleCssVariables.color, FtButtonPrimaryCssVariables.rippleColor)};
         }
 
@@ -134,7 +133,7 @@ export const classicStyles = [
             display: block;
             margin: 0 ${FtButtonCssVariables.iconPadding};
             ${setVariable(FtTypographyButtonCssVariables.fontSize, "1em")};
-            ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-button-internal-line-height)")};
+            ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--button-internal-line-height)")};
         }
 
         .ft-button--dense .ft-button--label {
@@ -160,14 +159,14 @@ export const classicStyles = [
             padding: 0 ${FtButtonDenseCssVariables.verticalPadding};
         }
 
-        .ft-button:not(.ft-button--trailing-icon) [part="label"]{
+        .ft-button:not(.ft-button--trailing-icon) [part="label"] {
             order: 2;
         }
 
         ft-loader {
             ${setVariable(FtLoaderCssVariables.size, FtButtonCssVariables.iconSize)};
-            ${setVariable(FtLoaderCssVariables.color, "var(--ft-button-internal-color)")};
+            ${setVariable(FtLoaderCssVariables.color, "var(--button-internal-color)")};
         }
     `,
-    noTextSelect
+    noTextSelect,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-button",
-    "version": "1.3.15",
+    "version": "1.3.17",
     "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.1.100",
-        "@fluid-topics/ft-icon": "1.3.15",
-        "@fluid-topics/ft-loader": "1.3.15",
-        "@fluid-topics/ft-ripple": "1.3.15",
-        "@fluid-topics/ft-tooltip": "1.3.15",
-        "@fluid-topics/ft-typography": "1.3.15",
-        "@fluid-topics/ft-wc-utils": "1.3.15",
+        "@fluid-topics/design-system-variables": "0.1.102",
+        "@fluid-topics/ft-icon": "1.3.17",
+        "@fluid-topics/ft-loader": "1.3.17",
+        "@fluid-topics/ft-ripple": "1.3.17",
+        "@fluid-topics/ft-tooltip": "1.3.17",
+        "@fluid-topics/ft-typography": "1.3.17",
+        "@fluid-topics/ft-wc-utils": "1.3.17",
         "lit": "3.1.0"
     },
-    "gitHead": "5aa2861244264a93f9ce941c3541191eb22a4650"
+    "gitHead": "ca55c7b44d386d960ceb68323361ce0ab3aefaa8"
 }