@fluid-topics/ft-base-input 1.3.14 → 1.3.16

package/build/ft-base-input.styles.d.ts

@@ -20,6 +20,12 @@ export declare const FtdsBaseInputCssVariables: {
     warningBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     warningBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusTopRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusBottomRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusTopLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusBottomLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     focusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     focusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     focusFocusRingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;

package/build/ft-base-input.styles.js

@@ -1,5 +1,11 @@
 import { css } from "lit";
 import { FtCssVariableFactory, textInput, typographyBody2Medium, typographyCaption2Medium } from "@fluid-topics/ft-wc-utils";
+import { FtdsInputLabelCssVariables } from "@fluid-topics/ft-input-label";
+import { FtdsInputHelperTextCssVariables } from "@fluid-topics/ft-input-helper-text";
+import { FtdsButtonCssVariables } from "@fluid-topics/ft-button";
+const borderRadius = FtCssVariableFactory.create("--ftds-base-input-border-radius", "", "SIZE", textInput.borderRadius);
+const borderRadiusRight = FtCssVariableFactory.extend("--ftds-base-input-border-radius-right", "", borderRadius);
+const borderRadiusLeft = FtCssVariableFactory.extend("--ftds-base-input-border-radius-left", "", borderRadius);
 export const FtdsBaseInputCssVariables = {
     defaultInputFontSize: FtCssVariableFactory.create("--ftds-base-input-default-input-font-size", "", "SIZE", typographyBody2Medium.fontSize),
     defaultInputLineHeight: FtCssVariableFactory.create("--ftds-base-input-default-input-line-height", "", "NUMBER", typographyBody2Medium.lineHeight),
@@ -21,7 +27,13 @@ export const FtdsBaseInputCssVariables = {
     errorBorderColor: FtCssVariableFactory.create("--ftds-base-input-error-border-color", "", "COLOR", textInput.errorBorderColor),
     warningBorderWidth: FtCssVariableFactory.create("--ftds-base-input-warning-border-width", "", "SIZE", textInput.warningBorderWidth),
     warningBorderColor: FtCssVariableFactory.create("--ftds-base-input-warning-border-color", "", "COLOR", textInput.warningBorderColor),
-    borderRadius: FtCssVariableFactory.create("--ftds-base-input-border-radius", "", "COLOR", textInput.borderRadius),
+    borderRadius: borderRadius,
+    borderRadiusRight: borderRadiusRight,
+    borderRadiusLeft: borderRadiusLeft,
+    borderRadiusTopRight: FtCssVariableFactory.extend("--ftds-base-input-border-radius-top-right", "", borderRadiusRight),
+    borderRadiusBottomRight: FtCssVariableFactory.extend("--ftds-base-input-border-radius-bottom-right", "", borderRadiusRight),
+    borderRadiusTopLeft: FtCssVariableFactory.extend("--ftds-base-input-border-radius-top-left", "", borderRadiusLeft),
+    borderRadiusBottomLeft: FtCssVariableFactory.extend("--ftds-base-input-border-radius-bottom-left", "", borderRadiusLeft),
     focusOutlineOffset: FtCssVariableFactory.create("--ftds-base-input-focus-outline-offset", "", "SIZE", textInput.focusOutlineOffset),
     focusOutlineWidth: FtCssVariableFactory.create("--ftds-base-input-focus-outline-width", "", "SIZE", textInput.focusOutlineWidth),
     focusFocusRingColor: FtCssVariableFactory.create("--ftds-base-input-focus-ring-color", "", "COLOR", textInput.focusFocusRingColor),
@@ -37,7 +49,7 @@ export const FtdsBaseInputCssVariables = {
     errorHelperIconColor: FtCssVariableFactory.create("--ftds-base-input-helper-error-helper-icon-color", "", "COLOR", textInput.errorHelperIconColor),
     warningHelperIconColor: FtCssVariableFactory.create("--ftds-base-input-helper-warning-helper-icon-color", "", "COLOR", textInput.warningHelperIconColor),
 };
-//language=css
+// language=css
 export const styles = css `
 
     *:focus {
@@ -96,7 +108,10 @@ export const styles = css `
         font-size: ${FtdsBaseInputCssVariables.defaultInputFontSize};
         line-height: ${FtdsBaseInputCssVariables.defaultInputLineHeight};
         border: ${FtdsBaseInputCssVariables.defaultBorderWidth} solid ${FtdsBaseInputCssVariables.defaultBorderColor};
-        border-radius: ${FtdsBaseInputCssVariables.borderRadius};
+        border-top-left-radius: ${FtdsBaseInputCssVariables.borderRadiusTopLeft};
+        border-bottom-left-radius: ${FtdsBaseInputCssVariables.borderRadiusBottomLeft};
+        border-top-right-radius: ${FtdsBaseInputCssVariables.borderRadiusTopRight};
+        border-bottom-right-radius: ${FtdsBaseInputCssVariables.borderRadiusBottomRight};
         --current-border-width: ${FtdsBaseInputCssVariables.defaultBorderWidth};
         outline-offset: calc(${FtdsBaseInputCssVariables.focusOutlineOffset} - ${FtdsBaseInputCssVariables.defaultBorderWidth});
 
@@ -151,7 +166,7 @@ export const styles = css `
     }
 
     .inside-structure .inside-structure--icon.append ftds-button {
-        --ft-button-icon-only-scale: ${FtdsBaseInputCssVariables.appendIconScale};
+        ${FtdsButtonCssVariables.iconOnlyScale.set(FtdsBaseInputCssVariables.appendIconScale)};
     }
 
     .inside-structure .inside-structure--icon.prepend {
@@ -160,7 +175,7 @@ export const styles = css `
     }
 
     .inside-structure .inside-structure--icon.prepend ftds-button {
-        --ft-button-icon-only-scale: ${FtdsBaseInputCssVariables.prependIconScale};
+        ${FtdsButtonCssVariables.iconOnlyScale.set(FtdsBaseInputCssVariables.prependIconScale)};
     }
 
     .inside-structure .inside-structure--icon.append button {
@@ -184,25 +199,25 @@ export const styles = css `
     }
 
     ftds-input-label {
-        --ft-input-label-color: ${FtdsBaseInputCssVariables.labelColor};
+        ${FtdsInputLabelCssVariables.color.set(FtdsBaseInputCssVariables.labelColor)};
     }
 
     .ftds-input.with-prepend-icon ftds-input-label {
-        --ft-input-label-additional-padding-left: calc(var(--icon-size) + var(--field-horizontal-gap));
+        ${FtdsInputLabelCssVariables.additionalPaddingLeft.set(css `calc(var(--icon-size) + var(--field-horizontal-gap))`)};
     }
 
     .ftds-input.with-append-icon ftds-input-label {
-        --ft-input-label-additional-padding-right: calc(var(--icon-size) + var(--field-horizontal-gap));
+        ${FtdsInputLabelCssVariables.additionalPaddingRight.set(css `calc(var(--icon-size) + var(--field-horizontal-gap))`)};
     }
 
     ftds-input-helper-text {
         margin-top: ${FtdsBaseInputCssVariables.helperHorizontalGap};
         padding-left: ${FtdsBaseInputCssVariables.helperHorizontalPadding};
-        --ftds-helper-text-icon-size: ${FtdsBaseInputCssVariables.helperIconSize};
-        --ftds-helper-text-icon-horizontal-gap: ${FtdsBaseInputCssVariables.helperIconHorizontalGap};
-        --ftds-helper-text-color: ${FtdsBaseInputCssVariables.defaultHelperTextColor};
-        --ftds-helper-text-error-icon-color: ${FtdsBaseInputCssVariables.errorHelperIconColor};
-        --ftds-helper-text-warning-icon-color: ${FtdsBaseInputCssVariables.warningHelperIconColor};
+        ${FtdsInputHelperTextCssVariables.iconSize.set(FtdsBaseInputCssVariables.helperIconSize)};
+        ${FtdsInputHelperTextCssVariables.iconHorizontalGap.set(FtdsBaseInputCssVariables.helperIconHorizontalGap)};
+        ${FtdsInputHelperTextCssVariables.color.set(FtdsBaseInputCssVariables.defaultHelperTextColor)};
+        ${FtdsInputHelperTextCssVariables.errorColor.set(FtdsBaseInputCssVariables.errorHelperIconColor)};
+        ${FtdsInputHelperTextCssVariables.warningColor.set(FtdsBaseInputCssVariables.warningHelperIconColor)};
     }
 
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-base-input",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "description": "Base input structure for Admin Design System inputs",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.3.14",
-    "@fluid-topics/ft-input-label": "1.3.14",
-    "@fluid-topics/ft-ripple": "1.3.14",
-    "@fluid-topics/ft-typography": "1.3.14",
-    "@fluid-topics/ft-wc-utils": "1.3.14",
+    "@fluid-topics/ft-icon": "1.3.16",
+    "@fluid-topics/ft-input-label": "1.3.16",
+    "@fluid-topics/ft-ripple": "1.3.16",
+    "@fluid-topics/ft-typography": "1.3.16",
+    "@fluid-topics/ft-wc-utils": "1.3.16",
     "lit": "3.1.0"
   },
-  "gitHead": "18f0f8e7a68ec235ee6838c4f86002821393322e"
+  "gitHead": "092d409b397263ffef1f860386137eea8e5f7c2c"
 }