@startupjs-ui/button 0.3.1 → 0.3.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.5](https://github.com/startupjs/startupjs-ui/compare/v0.3.4...v0.3.5) (2026-06-19)
+
+**Note:** Version bump only for package @startupjs-ui/button
+
+
+
+
+
+## [0.3.4](https://github.com/startupjs/startupjs-ui/compare/v0.3.3...v0.3.4) (2026-06-18)
+
+**Note:** Version bump only for package @startupjs-ui/button
+
+
+
+
+
 ## [0.3.1](https://github.com/startupjs/startupjs-ui/compare/v0.3.0...v0.3.1) (2026-06-08)
 
 **Note:** Version bump only for package @startupjs-ui/button

package/README.mdx

@@ -173,6 +173,14 @@ You can fine-tune the button's appearance using style props:
 - **hoverStyle** -- custom styles applied on hover
 - **activeStyle** -- custom styles applied when pressed
 
+## Theme configuration
+
+Button also exposes CSSX theme configuration for app-wide visual tuning:
+
+- **$UI.Button.outlinedBorderColor** -- override the border color used by the `outlined` variant. By default the border uses the button color with opacity.
+- **$UI.Button.useBgColorForFlat** -- when enabled, the `flat` variant first tries `bg-${color}` before falling back to the regular color token.
+- **$UI.Button.webNativeButton** -- controls whether the web root renders with native button semantics. It is enabled by default.
+
 ## Call to Action
 
 Try to keep the variety of button combinations you use in your app to a minimum.

package/index.cssx.styl

@@ -26,6 +26,9 @@ $this = merge({
     xxl: $UI.lineHeights.h4
   },
   outlinedBorderWidth: 1px,
+  outlinedBorderColor: null,
+  useBgColorForFlat: 0,
+  webNativeButton: 1,
   iconMargins: {
     xs: .5u,
     s: .5u,

package/index.tsx

@@ -10,10 +10,19 @@ import STYLES from './index.cssx.styl'
 
 const {
   config: {
-    heights, outlinedBorderWidth, iconMargins
+    heights,
+    outlinedBorderWidth,
+    outlinedBorderColor,
+    useBgColorForFlat,
+    webNativeButton,
+    iconMargins
   }
 } = STYLES
 
+function isConfigEnabled (value: unknown): boolean {
+  return value !== false && value !== 0 && value !== '0'
+}
+
 export default observer(themed('Button', Button))
 
 export const _PropsJsonSchema = {/* ButtonProps */} // used in docs generation
@@ -98,6 +107,8 @@ function Button ({
   if (!getColor(color)) console.error('Button component: Color for color property is incorrect. Use colors from Colors')
 
   const isFlat = variant === 'flat'
+  const shouldUseBgColorForFlat = isConfigEnabled(useBgColorForFlat)
+  const shouldUseWebNativeButton = isConfigEnabled(webNativeButton)
   const _color = getColor(color) as string | undefined
   const textColor = isFlat ? getFlatTextColorName() : color
   const _textColor = getColor(textColor) as string | undefined
@@ -121,11 +132,11 @@ function Button ({
 
   switch (variant) {
     case 'flat':
-      rootStyle.backgroundColor = _color
+      rootStyle.backgroundColor = (shouldUseBgColorForFlat ? getColor(`bg-${color}`) : null) || _color
       break
     case 'outlined':
       rootStyle.borderWidth = outlinedBorderWidth
-      rootStyle.borderColor = colorToRGBA(_colorString, 0.5)
+      rootStyle.borderColor = outlinedBorderColor || colorToRGBA(_colorString, 0.5)
       extraHoverStyle = { backgroundColor: colorToRGBA(_colorString, 0.05) }
       extraActiveStyle = { backgroundColor: colorToRGBA(_colorString, 0.25) }
       break
@@ -163,7 +174,7 @@ function Button ({
   return pug`
     Div.root(
       row
-      _webNativeButton
+      _webNativeButton=shouldUseWebNativeButton
       shape=shape
       style=[rootStyle, style]
       styleName=[

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/button",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "publishConfig": {
     "access": "public"
   },
@@ -9,15 +9,15 @@
   "type": "module",
   "dependencies": {
     "@startupjs-ui/core": "^0.3.0",
-    "@startupjs-ui/div": "^0.3.1",
-    "@startupjs-ui/icon": "^0.3.0",
+    "@startupjs-ui/div": "^0.3.4",
+    "@startupjs-ui/icon": "^0.3.5",
     "@startupjs-ui/loader": "^0.3.0",
-    "@startupjs-ui/span": "^0.3.1"
+    "@startupjs-ui/span": "^0.3.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
+  "gitHead": "8fc799070c16fb24de4ad0dbd6054108fe342d7c"
 }