button 80%

ymhaah · Nov 30, 2023 · f678689 · f678689
1 parent d9deb4d
commit f678689
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 304 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
 		"build": "tsc && vite build"
 	},
 	"dependencies": {
-		"color-contrast-checker": "^2.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"wicg-inert": "^3.1.2"

diff --git a/packages/components/button/src/Button.scss b/packages/components/button/src/Button.scss
@@ -1,14 +1,20 @@
 :where(button.Moon-Rock_Button) {
+	--font-size: var(--Moon-Rock_button-font-size, 1rem);
+	--text-color: var(--Moon-Rock_button-text-color);
+	--background-color: var(--Moon-Rock_button-background-color);
+	--primary-color: var(--Moon-Rock_button-primary-color);
+	--secondary-color: var(--Moon-Rock_button-secondary-color);
+	--accent-color: var(--Moon-Rock_button-accent-color);
 	width: fit-content;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 	vertical-align: middle;
 	text-align: center;
 	white-space: nowrap;
-	font-size: var(--Moon-Rock_button-font-size, 1rem);
 	overflow: hidden;
 	appearance: button;
+	font-size: var(--font-size);
 }
 :where(button.Moon-Rock_Button--BiasStyles) {
 	max-width: min(100%, 100vw);
@@ -17,6 +23,8 @@
 	text-decoration: none;
 	text-transform: none;
 	cursor: pointer;
+	color: var(--text-color);
+	background-color: var(--background-color);
 }
 :where(button.Moon-Rock_Button--multiline) {
 	text-wrap: balance;
@@ -29,27 +37,15 @@
 		button.Moon-Rock_Button--BiasStyles:focus,
 		button.Moon-Rock_Button--BiasStyles:focus-visible
 	) {
-	outline-color: var(--Moon-Rock_button-background-color, #007bff);
+	outline-color: var(--background-color);
 	outline-style: solid;
 	outline-width: 0.2em;
 	outline-offset: 0.2em;
 }
-
 :where(button.Moon-Rock_Button--BiasStyles *) {
 	max-width: 100%;
 	max-height: 100%;
 }
-
-// .Button:has(img, svg) {
-// }
-// .Button:where(:hover, :active):not(:has(img, svg)) {
-// }
-// .Button:has(img, svg):where(:hover, :active) {
-// }
-// .Button:not(:last-child) {
-// 	margin: 0 0 1rem 0;
-// }
-
 @supports not (width: fit-content) {
 	:where(button.Moon-Rock_Button) {
 		width: auto;
@@ -60,9 +56,3 @@
 		white-space: normal;
 	}
 }
-
-// // TODO: make the multiline support
-// TODO: disable Animation
-// TODO: isIconOnly
-// TODO: link the main context with the button and make it take a style
-// // TODO: padding
diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -1,74 +1,40 @@
-// import {UseButtonProps, useButton} from "./use-button";
-import { useCallback, useLayoutEffect, useRef, ComponentProps } from "react";
+import { useLayoutEffect, useRef } from "react";
 
 import "wicg-inert";
 
-import useElementProperties from "../../../hooks/useElementProperties";
 import useCssVariable from "../../../hooks/useCssVariable.tsx";
 import useClampFontSize from "../../../hooks/useClampFontSize.tsx";
 
-import "./Button.scss";
-
-// const Button = forwardRef<"button", ButtonProps>((props, ref) => {
-//   const {
-//     domRef,
-//     children,
-//     startContent,
-//     endContent,
-//     getButtonProps,
-//   } = useButton({...props, ref});
-
-//   return (
-//     <Component ref={domRef} className={styles} {...getButtonProps()}>
-//       {startContent}
-//       {children}
-//       {endContent}
-//     </Component>
-//   );
-// });
-
-type nativeButtonPropsT = ComponentProps<"button">;
+import buttonPropsT from "./buttonPropsT.ts";
 
-type customButtonPropsT = {
-	children: React.ReactNode;
-	fontSize?: number;
-	fontSizeSetting?: {
-		minFontSize: number;
-		maxFontSize: number;
-		minWidth: number;
-		maxWidth: number;
-	};
-	isMultiline?: boolean;
-	isDisabled?: boolean;
-	isIconOnly?: string;
-	removeBiasStyles?: boolean;
-	a11y?: boolean;
-};
-
-type buttonPropsT = customButtonPropsT & nativeButtonPropsT;
+import "./Button.scss";
 
 function Button({
 	children,
-	fontSize = 14,
+	fontSize = 12,
 	fontSizeSetting = {
 		minFontSize: fontSize,
-		maxFontSize: fontSize * 1.25,
+		maxFontSize: fontSize * 1.2,
 		minWidth: 480,
 		maxWidth: 1280,
 	},
 	isMultiline = false,
 	isDisabled = false,
 	isIconOnly,
 	removeBiasStyles = false,
-	a11y = false,
+	colors = {
+		textColor: "",
+		backgroundColor: "",
+		primaryColor: "",
+		secondaryColor: "",
+		accentColor: "",
+	},
 	...nativeButtonAttributes
 }: buttonPropsT) {
 	type ELEMENT_TYPE = HTMLButtonElement;
 
 	const ButtonRef = useRef<ELEMENT_TYPE>(null);
 
-	const buttonSize = useElementProperties<ELEMENT_TYPE>(ButtonRef);
-
 	const fontSizeValue = useClampFontSize(
 		fontSize || fontSizeSetting.minFontSize,
 		fontSizeSetting.maxFontSize,
@@ -77,7 +43,24 @@ function Button({
 	);
 
 	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-font-size", fontSizeValue, ButtonRef);
-	// useCssVariable("--Moon-Rock_button-background-color");
+
+	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-text-color", colors?.textColor, ButtonRef);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-background-color",
+		colors?.backgroundColor,
+		ButtonRef,
+	);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-primary-color",
+		colors?.primaryColor,
+		ButtonRef,
+	);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-secondary-color",
+		colors?.secondaryColor,
+		ButtonRef,
+	);
+	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-accent-color", colors?.accentColor, ButtonRef);
 
 	useLayoutEffect(() => {
 		if (ButtonRef.current) {
@@ -108,31 +91,16 @@ function Button({
 export { Button };
 export type { buttonPropsT };
 
-// function App() {
-// 	return (
-// 		<Button>
-// 			<Button>test</Button>
-// 		</Button>
-// 	);
-// }
-
-/*
-	? button roll:
-	- min size 30px (touch-based interactions)
-	- touch targets should be at least 48 x 48
-	- min margin 8px
-	-  36px high, min width 88px
-*/
-
 // TODO: disable Animation
-// TODO: Icon with text
-// TODO: color from the prop or take the background color get it with a fun
-// TODO: color properties
-// TODO: Focus
+// TODO: link with the context
+// TODO: context varinat thing
+// // TODO: color from the prop or take the background color get it with a fun
+// // TODO: Focus
 // // TODO: isIconOnly
 // // TODO: fix the fact that you can't use more than one button with the css overwrite
 // // TODO: Remove suggested formats removeBiasStyles
 // // TODO: font Size Setting
+// // TODO: color properties
 // ################# TODO LATER #################
-// TODO: link with the context
 // TODO: doc ( try to use rem & em in every thing )
+// TODO: doc i don't take a value with do anything with it
diff --git a/packages/components/button/src/buttonPropsT.ts b/packages/components/button/src/buttonPropsT.ts
@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+
+import { cssColorsT } from "../../../types/colors.ts";
+
+type nativeButtonPropsT = ComponentProps<"button">;
+
+type customButtonPropsT = {
+	children: React.ReactNode;
+	fontSize?: number;
+	fontSizeSetting?: {
+		minFontSize: number;
+		maxFontSize: number;
+		minWidth: number;
+		maxWidth: number;
+	};
+	isMultiline?: boolean;
+	isDisabled?: boolean;
+	isIconOnly?: string;
+	removeBiasStyles?: boolean;
+	colors?: {
+		textColor: cssColorsT | string;
+		backgroundColor: cssColorsT | string;
+		primaryColor: cssColorsT | string;
+		secondaryColor: cssColorsT | string;
+		accentColor: cssColorsT | string;
+	};
+};
+
+type buttonPropsT = customButtonPropsT & nativeButtonPropsT;
+
+export default buttonPropsT;
diff --git a/packages/components/button/src/index.ts b/packages/components/button/src/index.ts
@@ -1,13 +1,6 @@
 import { Button } from "./Button.tsx";
 
-// export types
-import type { buttonPropsT } from "./Button.tsx";
+import type buttonPropsT from "./buttonPropsT.ts";
 
-// export hooks
-// export {useButton} from "./use-button";
-
-// export context
-
-// export component
 export { Button };
 export type { buttonPropsT };