@rebilly/instruments 8.25.0 → 8.25.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [8.25.2](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.25.1...instruments/core-v8.25.2) (2024-01-19)
+
+
+### Bug Fixes
+
+* **instruments:** Update secondary button style ([#2984](https://github.com/Rebilly/rebilly/issues/2984)) ([878e4cb](https://github.com/Rebilly/rebilly/commit/878e4cb694fdbaa00f2f414e292c4e42aee79831))
+
+## [8.25.1](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.25.0...instruments/core-v8.25.1) (2024-01-19)
+
+
+### Bug Fixes
+
+* **instruments:** Fix issues with Framepay's theme ([#2978](https://github.com/Rebilly/rebilly/issues/2978)) ([1eca2f5](https://github.com/Rebilly/rebilly/commit/1eca2f58b7e8e72d00d94fa16dddc6437adce2ff))
+
 ## [8.25.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v8.24.1...instruments/core-v8.25.0) (2024-01-19)
 
 

package/dist/index.js

@@ -22562,6 +22562,15 @@ const themeSchema = {
       type: "string",
       default: "1px solid transparent"
     }),
+    buttonBorderColor: optional({
+      type: "string"
+    }),
+    buttonBorderWidth: optional({
+      type: "string"
+    }),
+    buttonBorderType: optional({
+      type: "string"
+    }),
     buttonBorderRadius: optional({
       type: "string"
     }),
@@ -22570,8 +22579,7 @@ const themeSchema = {
       default: "none"
     }),
     buttonSecondaryColorText: optional({
-      type: "string",
-      default: "#0044D4"
+      type: "string"
     }),
     buttonSecondaryFontFamily: optional({
       type: "string"
@@ -22586,8 +22594,16 @@ const themeSchema = {
       type: "string"
     }),
     buttonSecondaryBorder: optional({
-      type: "string",
-      default: "1px solid #0044D4"
+      type: "string"
+    }),
+    buttonSecondaryBorderColor: optional({
+      type: "string"
+    }),
+    buttonSecondaryBorderWidth: optional({
+      type: "string"
+    }),
+    buttonSecondaryBorderType: optional({
+      type: "string"
     }),
     buttonSecondaryBorderRadius: optional({
       type: "string"
@@ -22618,6 +22634,15 @@ const themeSchema = {
     buttonHoverBorder: optional({
       type: "string"
     }),
+    buttonHoverBorderColor: optional({
+      type: "string"
+    }),
+    buttonHoverBorderWidth: optional({
+      type: "string"
+    }),
+    buttonHoverBorderType: optional({
+      type: "string"
+    }),
     buttonHoverBorderRadius: optional({
       type: "string"
     }),
@@ -22646,6 +22671,15 @@ const themeSchema = {
     buttonSecondaryHoverBorder: optional({
       type: "string"
     }),
+    buttonSecondaryHoverBorderColor: optional({
+      type: "string"
+    }),
+    buttonSecondaryHoverBorderWidth: optional({
+      type: "string"
+    }),
+    buttonSecondaryHoverBorderType: optional({
+      type: "string"
+    }),
     buttonSecondaryHoverBorderRadius: optional({
       type: "string"
     }),
@@ -22675,6 +22709,15 @@ const themeSchema = {
     buttonActiveBorder: optional({
       type: "string"
     }),
+    buttonActiveBorderColor: optional({
+      type: "string"
+    }),
+    buttonActiveBorderWidth: optional({
+      type: "string"
+    }),
+    buttonActiveBorderType: optional({
+      type: "string"
+    }),
     buttonActiveBorderRadius: optional({
       type: "string"
     }),
@@ -22703,6 +22746,15 @@ const themeSchema = {
     buttonSecondaryActiveBorder: optional({
       type: "string"
     }),
+    buttonSecondaryActiveBorderColor: optional({
+      type: "string"
+    }),
+    buttonSecondaryActiveBorderWidth: optional({
+      type: "string"
+    }),
+    buttonSecondaryActiveBorderType: optional({
+      type: "string"
+    }),
     buttonSecondaryActiveBorderRadius: optional({
       type: "string"
     }),
@@ -23297,7 +23349,7 @@ function handleComputedProperty(options) {
   var _a;
   return Object.assign({}, options, {
     _computed: {
-      version: "8.24.1",
+      version: "8.25.1",
       paymentMethodsUrl: ((_a = options._dev) == null ? void 0 : _a.paymentMethodsUrl) ?? "https://forms.secure-payments.app"
     }
   });
@@ -24223,6 +24275,24 @@ const properties = {
       value: "1px solid transparent"
     }
   },
+  buttonBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "colorPrimary"
+    }
+  },
+  buttonBorderWidth: {
+    fallback: {
+      type: "static",
+      value: "1px"
+    }
+  },
+  buttonBorderType: {
+    fallback: {
+      type: "static",
+      value: "solid"
+    }
+  },
   buttonBorderRadius: {
     fallback: {
       type: "variable",
@@ -24245,7 +24315,7 @@ const properties = {
   buttonSecondaryColorText: {
     fallback: {
       type: "variable",
-      value: "colorPrimary"
+      value: "colorText"
     }
   },
   buttonSecondaryFontFamily: {
@@ -24275,7 +24345,25 @@ const properties = {
   buttonSecondaryBorder: {
     fallback: {
       type: "func",
-      value: (theme2) => `1px solid ${theme2.colorPrimary}`
+      value: (theme2) => `1px solid ${theme2.colorMutedBorder}`
+    }
+  },
+  buttonSecondaryBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "colorMutedBorder"
+    }
+  },
+  buttonSecondaryBorderWidth: {
+    fallback: {
+      type: "static",
+      value: "1px"
+    }
+  },
+  buttonSecondaryBorderType: {
+    fallback: {
+      type: "static",
+      value: "solid"
     }
   },
   buttonSecondaryBorderRadius: {
@@ -24346,6 +24434,24 @@ const properties = {
       }
     }
   },
+  buttonHoverBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "colorPrimary"
+    }
+  },
+  buttonHoverBorderWidth: {
+    fallback: {
+      type: "variable",
+      value: "buttonBorderWidth"
+    }
+  },
+  buttonHoverBorderType: {
+    fallback: {
+      type: "variable",
+      value: "buttonBorderType"
+    }
+  },
   buttonHoverBorderRadius: {
     fallback: {
       type: "variable",
@@ -24361,14 +24467,19 @@ const properties = {
   /** Buttons Secondary: Hover */
   buttonSecondaryHoverColorBackground: {
     fallback: {
-      type: "variable",
-      value: "colorBackground"
+      type: "func",
+      value: (theme2) => {
+        if (theme2.colorBackgroundProvided) {
+          return darken(theme2.colorBackground, 3);
+        }
+        return darken(theme2.colorBackground, 3);
+      }
     }
   },
   buttonSecondaryHoverColorText: {
     fallback: {
       type: "variable",
-      value: "buttonSecondaryColorText"
+      value: "colorText"
     }
   },
   buttonSecondaryHoverFontFamily: {
@@ -24401,6 +24512,24 @@ const properties = {
       value: "buttonSecondaryBorder"
     }
   },
+  buttonSecondaryHoverBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryBorderColor"
+    }
+  },
+  buttonSecondaryHoverBorderWidth: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryBorderWidth"
+    }
+  },
+  buttonSecondaryHoverBorderType: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryBorderType"
+    }
+  },
   buttonSecondaryHoverBorderRadius: {
     fallback: {
       type: "variable",
@@ -24456,6 +24585,24 @@ const properties = {
       value: "buttonHoverBorder"
     }
   },
+  buttonActiveBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "buttonHoverBorderColor"
+    }
+  },
+  buttonActiveBorderWidth: {
+    fallback: {
+      type: "variable",
+      value: "buttonHoverBorderWidth"
+    }
+  },
+  buttonActiveBorderType: {
+    fallback: {
+      type: "variable",
+      value: "buttonHoverBorderType"
+    }
+  },
   buttonActiveBorderRadius: {
     fallback: {
       type: "variable",
@@ -24511,6 +24658,24 @@ const properties = {
       value: "buttonSecondaryHoverBorder"
     }
   },
+  buttonSecondaryActiveBorderColor: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryHoverBorderColor"
+    }
+  },
+  buttonSecondaryActiveBorderWidth: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryHoverBorderWidth"
+    }
+  },
+  buttonSecondaryActiveBorderType: {
+    fallback: {
+      type: "variable",
+      value: "buttonSecondaryHoverBorderType"
+    }
+  },
   buttonSecondaryActiveBorderRadius: {
     fallback: {
       type: "variable",
@@ -25814,7 +25979,10 @@ const getStyleProps = (obj, particle = "") => {
     fontWeight: obj[`--rebilly-${particle}FontWeight`],
     lineHeight: obj[`--rebilly-${particle}FontLineHeight`],
     background: obj[`--rebilly-${particle}ColorBackground`],
-    boxShadow: obj[`--rebilly-${particle}BoxShadow`]
+    boxShadow: obj[`--rebilly-${particle}BoxShadow`],
+    borderColor: obj[`--rebilly-${particle}BorderColor`],
+    borderWidth: obj[`--rebilly-${particle}BorderWidth`],
+    borderType: obj[`--rebilly-${particle}BorderType`]
   };
   return output;
 };
@@ -25861,6 +26029,9 @@ const setupFramepayTheme = () => {
           "buttonSecondaryActive"
         )
       },
+      focus: {
+        ...getStyleProps(resolvedCssVarsObj, "buttonSecondary")
+      },
       active: {
         ...getStyleProps(resolvedCssVarsObj, "button"),
         ":hover": getStyleProps(resolvedCssVarsObj, "buttonHover"),
@@ -26496,7 +26667,7 @@ class RebillyInstrumentsInstance {
     await show({ componentName, payload });
   }
   get version() {
-    return `RebillyInstruments Ver.${"8.24.1"}`;
+    return `RebillyInstruments Ver.${"8.25.1"}`;
   }
   on(eventName, callback) {
     on({ eventName, callback });