Merge pull request #8 from Bland-UI/feat/button-customization

Feat/button customization
Bland-UI · Jul 1, 2024 · d0755e7 · d0755e7
2 parents afce7f4 + ba2110c
commit d0755e7
Show file tree

Hide file tree

Showing 4 changed files with 403 additions and 17 deletions.
diff --git a/.changeset/wise-masks-hang.md b/.changeset/wise-masks-hang.md
@@ -0,0 +1,6 @@
+---
+"@blandui/blandui-react": patch
+"@blandui/blandui": patch
+---
+
+We can now customize more the style of the Button component
diff --git a/packages/blandui-react/src/components/Button/Button.tsx b/packages/blandui-react/src/components/Button/Button.tsx
@@ -29,7 +29,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((
 	},
 	ref,
 ) => {
-	const baseCn = 'flex items-center justify-center font-semibold capitalize';
+	const baseCn = 'flex items-center justify-center font-semibold';
 
 	const sizeClasses = {
 		sm: 'rounded-md gap-sm py-sm px-sm text-[0.625rem] leading-[1rem]',
@@ -39,28 +39,272 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((
 
 	const variantColorClasses = {
 		brand: {
-			primary:   'bg-btn-brand-primary-rest enabled:hover:bg-btn-brand-primary-hover active:bg-btn-brand-primary-pressed focus:bg-btn-brand-primary-focused focus:border-focused disabled:bg-btn-brand-primary-disabled enabled:text-inverse disabled:text-subtle border-none',
-			secondary: 'bg-btn-brand-secondary-rest enabled:hover:bg-btn-brand-secondary-hover active:bg-btn-brand-secondary-pressed focus:bg-btn-brand-secondary-focused focus:border-focused disabled:bg-btn-brand-secondary-disabled enabled:text-bold disabled:text-subtle border-none',
-			ghost:     'bg-btn-brand-ghost-rest enabled:hover:bg-btn-brand-ghost-hover active:bg-btn-brand-ghost-pressed focus:bg-btn-brand-ghost-focused focus:border-focused disabled:bg-btn-brand-ghost-disabled enabled:text-bold disabled:text-minimal border-none',
-			stroke:    'bg-btn-brand-stroke-rest enabled:hover:bg-btn-brand-stroke-hover active:bg-btn-brand-stroke-pressed focus:bg-btn-brand-stroke-focused focus:border-focused disabled:bg-btn-brand-stroke-disabled enabled:text-bold disabled:text-minimal border disabled:border-bold disabled:border-subtle',
+			primary: `
+				bg-btn-brand-primary-rest
+				enabled:hover:bg-btn-brand-primary-hover
+				active:bg-btn-brand-primary-pressed
+				focus:bg-btn-brand-primary-focused
+				disabled:bg-btn-brand-primary-disabled
+
+				text-btn-brand-primary-rest
+				enabled:hover:text-btn-brand-primary-hover
+				active:text-btn-brand-primary-pressed
+				focus:text-btn-brand-primary-focused
+				disabled:text-btn-brand-primary-disabled
+
+				focus:border-btn-brand-primary-focused
+				border-none
+			`,
+			secondary: `
+				bg-btn-brand-secondary-rest
+				enabled:hover:bg-btn-brand-secondary-hover
+				active:bg-btn-brand-secondary-pressed
+				focus:bg-btn-brand-secondary-focused
+				disabled:bg-btn-brand-secondary-disabled
+
+				text-btn-brand-secondary-rest
+				enabled:hover:text-btn-brand-secondary-hover
+				active:text-btn-brand-secondary-pressed
+				focus:text-btn-brand-secondary-focused
+				disabled:text-btn-brand-secondary-disabled
+
+				focus:border-btn-brand-secondary-focused
+				border-none
+			`,
+			ghost: `
+				bg-btn-brand-ghost-rest
+				enabled:hover:bg-btn-brand-ghost-hover
+				active:bg-btn-brand-ghost-pressed
+				focus:bg-btn-brand-ghost-focused
+				disabled:bg-btn-brand-ghost-disabled
+
+				text-btn-brand-ghost-rest
+				enabled:hover:text-btn-brand-ghost-hover
+				active:text-btn-brand-ghost-pressed
+				focus:text-btn-brand-ghost-focused
+				disabled:text-btn-brand-ghost-disabled
+
+				focus:border-btn-brand-ghost-focused
+				border-none
+			`,
+			stroke: `
+				bg-btn-brand-stroke-rest
+				enabled:hover:bg-btn-brand-stroke-hover
+				active:bg-btn-brand-stroke-pressed
+				focus:bg-btn-brand-stroke-focused
+				disabled:bg-btn-brand-stroke-disabled
+
+				text-btn-brand-stroke-rest
+				enabled:hover:text-btn-brand-stroke-hover
+				active:text-btn-brand-stroke-pressed
+				focus:text-btn-brand-stroke-focused
+				disabled:text-btn-brand-stroke-disabled
+
+				focus:border-btn-brand-stroke-focused
+				border enabled:border-btn-brand-stroke-rest
+				disabled:border-btn-brand-stroke-disabled
+			`,
 		},
 		success: {
-			primary:   'bg-btn-success-primary-rest enabled:hover:bg-btn-success-primary-hover active:bg-btn-success-primary-pressed focus:bg-btn-success-primary-focused focus:border-success-focused disabled:bg-btn-success-primary-disabled enabled:text-inverse disabled:text-subtle border-none',
-			secondary: 'bg-btn-success-secondary-rest enabled:hover:bg-btn-success-secondary-hover active:bg-btn-success-secondary-pressed focus:bg-btn-success-secondary-focused focus:border-success-focused disabled:bg-btn-success-secondary-disabled enabled:text-success disabled:text-subtle border-none',
-			ghost:     'bg-btn-success-ghost-rest enabled:hover:bg-btn-success-ghost-hover active:bg-btn-success-ghost-pressed focus:bg-btn-success-ghost-focused focus:border-success-focused disabled:bg-btn-success-ghost-disabled enabled:text-success disabled:text-minimal border-none',
-			stroke:    'bg-btn-success-stroke-rest enabled:hover:bg-btn-success-stroke-hover active:bg-btn-success-stroke-pressed focus:bg-btn-success-stroke-focused focus:border-success-focused disabled:bg-btn-success-stroke-disabled enabled:text-success disabled:text-minimal border enabled:border-success disabled:border-subtle',
+			primary: `
+				bg-btn-success-primary-rest
+				enabled:hover:bg-btn-success-primary-hover
+				active:bg-btn-success-primary-pressed
+				focus:bg-btn-success-primary-focused
+				disabled:bg-btn-success-primary-disabled
+
+				text-btn-success-primary-rest
+				enabled:hover:text-btn-success-primary-hover
+				active:text-btn-success-primary-pressed
+				focus:text-btn-success-primary-focused
+				disabled:text-btn-success-primary-disabled
+
+				focus:border-btn-success-primary-focused
+				border-none
+			`,
+			secondary: `
+				bg-btn-success-secondary-rest
+				enabled:hover:bg-btn-success-secondary-hover
+				active:bg-btn-success-secondary-pressed
+				focus:bg-btn-success-secondary-focused
+				disabled:bg-btn-success-secondary-disabled
+
+				text-btn-success-secondary-rest
+				enabled:hover:text-btn-success-secondary-hover
+				active:text-btn-success-secondary-pressed
+				focus:text-btn-success-secondary-focused
+				disabled:text-btn-success-secondary-disabled
+
+				focus:border-btn-success-secondary-focused
+				border-none
+			`,
+			ghost: `
+				bg-btn-success-ghost-rest
+				enabled:hover:bg-btn-success-ghost-hover
+				active:bg-btn-success-ghost-pressed
+				focus:bg-btn-success-ghost-focused
+				disabled:bg-btn-success-ghost-disabled
+
+				text-btn-success-ghost-rest
+				enabled:hover:text-btn-success-ghost-hover
+				active:text-btn-success-ghost-pressed
+				focus:text-btn-success-ghost-focused
+				disabled:text-btn-success-ghost-disabled
+
+				focus:border-btn-success-ghost-focused
+				border-none
+			`,
+			stroke: `
+				bg-btn-success-stroke-rest
+				enabled:hover:bg-btn-success-stroke-hover
+				active:bg-btn-success-stroke-pressed
+				focus:bg-btn-success-stroke-focused
+				disabled:bg-btn-success-stroke-disabled
+
+				text-btn-success-stroke-rest
+				enabled:hover:text-btn-success-stroke-hover
+				active:text-btn-success-stroke-pressed
+				focus:text-btn-success-stroke-focused
+				disabled:text-btn-success-stroke-disabled
+
+				focus:border-btn-success-stroke-focused
+				border enabled:border-btn-success-stroke-rest
+				disabled:border-btn-success-stroke-disabled
+			`,
 		},
 		danger: {
-			primary:   'bg-btn-danger-primary-rest enabled:hover:bg-btn-danger-primary-hover active:bg-btn-danger-primary-pressed focus:bg-btn-danger-primary-focused focus:border-danger-focused disabled:bg-btn-danger-primary-disabled enabled:text-inverse disabled:text-subtle border-none',
-			secondary: 'bg-btn-danger-secondary-rest enabled:hover:bg-btn-danger-secondary-hover active:bg-btn-danger-secondary-pressed focus:bg-btn-danger-secondary-focused focus:border-danger-focused disabled:bg-btn-danger-secondary-disabled enabled:text-danger disabled:text-subtle border-none',
-			ghost:     'bg-btn-danger-ghost-rest enabled:hover:bg-btn-danger-ghost-hover active:bg-btn-danger-ghost-pressed focus:bg-btn-danger-ghost-focused focus:border-danger-focused disabled:bg-btn-danger-ghost-disabled enabled:text-danger disabled:text-minimal border-none',
-			stroke:    'bg-btn-danger-stroke-rest enabled:hover:bg-btn-danger-stroke-hover active:bg-btn-danger-stroke-pressed focus:bg-btn-danger-stroke-focused focus:border-danger-focused disabled:bg-btn-danger-stroke-disabled enabled:text-danger disabled:text-minimal border enabled:border-danger disabled:border-subtle',
+			primary: `
+				bg-btn-danger-primary-rest
+				enabled:hover:bg-btn-danger-primary-hover
+				active:bg-btn-danger-primary-pressed
+				focus:bg-btn-danger-primary-focused
+				disabled:bg-btn-danger-primary-disabled
+
+				text-btn-danger-primary-rest
+				enabled:hover:text-btn-danger-primary-hover
+				active:text-btn-danger-primary-pressed
+				focus:text-btn-danger-primary-focused
+				disabled:text-btn-danger-primary-disabled
+
+				focus:border-btn-danger-primary-focused
+				border-none
+			`,
+			secondary: `
+				bg-btn-danger-secondary-rest
+				enabled:hover:bg-btn-danger-secondary-hover
+				active:bg-btn-danger-secondary-pressed
+				focus:bg-btn-danger-secondary-focused
+				disabled:bg-btn-danger-secondary-disabled
+
+				text-btn-danger-secondary-rest
+				enabled:hover:text-btn-danger-secondary-hover
+				active:text-btn-danger-secondary-pressed
+				focus:text-btn-danger-secondary-focused
+				disabled:text-btn-danger-secondary-disabled
+
+				focus:border-btn-danger-secondary-focused
+				border-none
+			`,
+			ghost: `
+				bg-btn-danger-ghost-rest
+				enabled:hover:bg-btn-danger-ghost-hover
+				active:bg-btn-danger-ghost-pressed
+				focus:bg-btn-danger-ghost-focused
+				disabled:bg-btn-danger-ghost-disabled
+
+				text-btn-danger-ghost-rest
+				enabled:hover:text-btn-danger-ghost-hover
+				active:text-btn-danger-ghost-pressed
+				focus:text-btn-danger-ghost-focused
+				disabled:text-btn-danger-ghost-disabled
+
+				focus:border-btn-danger-ghost-focused
+				border-none
+			`,
+			stroke: `
+				bg-btn-danger-stroke-rest
+				enabled:hover:bg-btn-danger-stroke-hover
+				active:bg-btn-danger-stroke-pressed
+				focus:bg-btn-danger-stroke-focused
+				disabled:bg-btn-danger-stroke-disabled
+
+				text-btn-danger-stroke-rest
+				enabled:hover:text-btn-danger-stroke-hover
+				active:text-btn-danger-stroke-pressed
+				focus:text-btn-danger-stroke-focused
+				disabled:text-btn-danger-stroke-disabled
+
+				focus:border-btn-danger-stroke-focused
+				border enabled:border-btn-danger-stroke-rest
+				disabled:border-btn-danger-stroke-disabled
+			`,
 		},
 		warning: {
-			primary:   'bg-btn-warning-primary-rest enabled:hover:bg-btn-warning-primary-hover active:bg-btn-warning-primary-pressed focus:bg-btn-warning-primary-focused focus:border-warning-focused disabled:bg-btn-warning-primary-disabled enabled:text-inverse disabled:text-subtle border-none',
-			secondary: 'bg-btn-warning-secondary-rest enabled:hover:bg-btn-warning-secondary-hover active:bg-btn-warning-seconadry-pressed focus:bg-btn-warning-secondary-focused focus:border-warning-focused disabled:bg-btn-warning-secondary-disabled enabled:text-warning disabled:text-subtle border-none',
-			ghost:     'bg-btn-warning-ghost-rest enabled:hover:bg-btn-warning-ghost-hover active:bg-btn-warning-ghost-pressed focus:bg-btn-warning-ghost-focused focus:border-warning-focused disabled:bg-btn-warning-ghost-disabled enabled:text-warning disabled:text-minimal border-none',
-			stroke:    'bg-btn-warning-stroke-rest enabled:hover:bg-btn-warning-stroke-hover active:bg-btn-warning-stroke-pressed focus:bg-btn-warning-stroke-focused focus:border-warning-focused disabled:bg-btn-warning-stroke-disabled enabled:text-warning disabled:text-minimal border enabled:border-warning disabled:border-subtle',
+			primary: `
+				bg-btn-warning-primary-rest
+				enabled:hover:bg-btn-warning-primary-hover
+				active:bg-btn-warning-primary-pressed
+				focus:bg-btn-warning-primary-focused
+				disabled:bg-btn-warning-primary-disabled
+
+				text-btn-warning-primary-rest
+				enabled:hover:text-btn-warning-primary-hover
+				active:text-btn-warning-primary-pressed
+				focus:text-btn-warning-primary-focused
+				disabled:text-btn-warning-primary-disabled
+
+				focus:border-btn-warning-primary-focused
+				border-none
+			`,
+			secondary: `
+				bg-btn-warning-secondary-rest
+				enabled:hover:bg-btn-warning-secondary-hover
+				active:bg-btn-warning-secondary-pressed
+				focus:bg-btn-warning-secondary-focused
+				disabled:bg-btn-warning-secondary-disabled
+
+				text-btn-warning-secondary-rest
+				enabled:hover:text-btn-warning-secondary-hover
+				active:text-btn-warning-secondary-pressed
+				focus:text-btn-warning-secondary-focused
+				disabled:text-btn-warning-secondary-disabled
+
+				focus:border-btn-warning-secondary-focused
+				border-none
+			`,
+			ghost: `
+				bg-btn-warning-ghost-rest
+				enabled:hover:bg-btn-warning-ghost-hover
+				active:bg-btn-warning-ghost-pressed
+				focus:bg-btn-warning-ghost-focused
+				disabled:bg-btn-warning-ghost-disabled
+
+				text-btn-warning-ghost-rest
+				enabled:hover:text-btn-warning-ghost-hover
+				active:text-btn-warning-ghost-pressed
+				focus:text-btn-warning-ghost-focused
+				disabled:text-btn-warning-ghost-disabled
+
+				focus:border-btn-warning-ghost-focused
+				border-none
+			`,
+			stroke: `
+				bg-btn-warning-stroke-rest
+				enabled:hover:bg-btn-warning-stroke-hover
+				active:bg-btn-warning-stroke-pressed
+				focus:bg-btn-warning-stroke-focused
+				disabled:bg-btn-warning-stroke-disabled
+
+				text-btn-warning-stroke-rest
+				enabled:hover:text-btn-warning-stroke-hover
+				active:text-btn-warning-stroke-pressed
+				focus:text-btn-warning-stroke-focused
+				disabled:text-btn-warning-stroke-disabled
+
+				focus:border-btn-warning-stroke-focused
+				border enabled:border-btn-warning-stroke-rest
+				disabled:border-btn-warning-stroke-disabled
+			`,
 		},
 	};
 

diff --git a/packages/blandui/src/Color/borderColor.ts b/packages/blandui/src/Color/borderColor.ts
@@ -19,4 +19,40 @@ export default {
 
 	brand:   colors.carbon[1000],
 	inverse: colors.gray[0],
+
+	// BUTTON - BRAND
+	'btn-brand-primary-focused':   colors.carbon[300],
+	'btn-brand-secondary-focused': colors.carbon[300],
+	'btn-brand-ghost-focused':     colors.carbon[300],
+
+	'btn-brand-stroke-rest':     colors.carbon[100],
+	'btn-brand-stroke-focused':  colors.carbon[300],
+	'btn-brand-stroke-disabled': colors.gray[100],
+
+	// BUTTON - SUCCESS
+	'btn-success-primary-focused':   colors.green[200],
+	'btn-success-secondary-focused': colors.green[200],
+	'btn-success-ghost-focused':     colors.green[200],
+
+	'btn-success-stroke-rest':     colors.green[500],
+	'btn-success-stroke-focused':  colors.green[200],
+	'btn-success-stroke-disabled': colors.gray[100],
+
+	// BUTTON - DANGER
+	'btn-danger-primary-focused':   colors.red[100],
+	'btn-danger-secondary-focused': colors.red[100],
+	'btn-danger-ghost-focused':     colors.red[100],
+
+	'btn-danger-stroke-rest':     colors.red[500],
+	'btn-danger-stroke-focused':  colors.red[100],
+	'btn-danger-stroke-disabled': colors.gray[100],
+
+	// BUTTON - WARNING
+	'btn-warning-primary-focused':   colors.amber[200],
+	'btn-warning-secondary-focused': colors.amber[200],
+	'btn-warning-ghost-focused':     colors.amber[200],
+
+	'btn-warning-stroke-rest':     colors.amber[500],
+	'btn-warning-stroke-focused':  colors.amber[200],
+	'btn-warning-stroke-disabled': colors.gray[100],
 };