button cssVar

ymhaah · Dec 1, 2023 · 2850e16 · 2850e16
1 parent f678689
commit 2850e16
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 39 deletions.
diff --git a/packages/components/button/src/Button.scss b/packages/components/button/src/Button.scss
@@ -1,10 +1,5 @@
 :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;
@@ -16,15 +11,23 @@
 	appearance: button;
 	font-size: var(--font-size);
 }
+:where(button.Moon-Rock_Button--cssVar) {
+	--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);
+	color: var(--text-color);
+	background-color: var(--background-color);
+	outline-color: var(--background-color);
+}
 :where(button.Moon-Rock_Button--BiasStyles) {
 	max-width: min(100%, 100vw);
 	padding: 0.4em;
 	user-select: none;
 	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;
@@ -33,11 +36,7 @@
 	pointer-events: none;
 	cursor: not-allowed;
 }
-:where(
-		button.Moon-Rock_Button--BiasStyles:focus,
-		button.Moon-Rock_Button--BiasStyles:focus-visible
-	) {
-	outline-color: var(--background-color);
+:where(button.Moon-Rock_Button--BiasStyles:focus-visible) {
 	outline-style: solid;
 	outline-width: 0.2em;
 	outline-offset: 0.2em;

diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -5,23 +5,24 @@ import "wicg-inert";
 import useCssVariable from "../../../hooks/useCssVariable.tsx";
 import useClampFontSize from "../../../hooks/useClampFontSize.tsx";
 
-import buttonPropsT from "./buttonPropsT.ts";
+import buttonPropsT from "../../../types/buttonPropsT.ts";
 
 import "./Button.scss";
 
 function Button({
 	children,
-	fontSize = 12,
+	fontSize,
 	fontSizeSetting = {
-		minFontSize: fontSize,
-		maxFontSize: fontSize * 1.2,
+		minFontSize: 12,
+		maxFontSize: 12 * 1.2,
 		minWidth: 480,
 		maxWidth: 1280,
 	},
 	isMultiline = false,
 	isDisabled = false,
 	isIconOnly,
 	removeBiasStyles = false,
+	cssVar = false,
 	colors = {
 		textColor: "",
 		backgroundColor: "",
@@ -42,25 +43,37 @@ function Button({
 		fontSizeSetting.maxWidth,
 	);
 
-	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-font-size", fontSizeValue, ButtonRef);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-font-size",
+		fontSize ? fontSizeValue : undefined,
+		ButtonRef,
+	);
 
-	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-text-color", colors?.textColor, ButtonRef);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-text-color",
+		cssVar ? colors?.textColor : undefined,
+		ButtonRef,
+	);
 	useCssVariable<ELEMENT_TYPE>(
 		"--Moon-Rock_button-background-color",
-		colors?.backgroundColor,
+		cssVar ? colors?.backgroundColor : undefined,
 		ButtonRef,
 	);
 	useCssVariable<ELEMENT_TYPE>(
 		"--Moon-Rock_button-primary-color",
-		colors?.primaryColor,
+		cssVar ? colors?.primaryColor : undefined,
 		ButtonRef,
 	);
 	useCssVariable<ELEMENT_TYPE>(
 		"--Moon-Rock_button-secondary-color",
-		colors?.secondaryColor,
+		cssVar ? colors?.secondaryColor : undefined,
+		ButtonRef,
+	);
+	useCssVariable<ELEMENT_TYPE>(
+		"--Moon-Rock_button-accent-color",
+		cssVar ? colors?.accentColor : undefined,
 		ButtonRef,
 	);
-	useCssVariable<ELEMENT_TYPE>("--Moon-Rock_button-accent-color", colors?.accentColor, ButtonRef);
 
 	useLayoutEffect(() => {
 		if (ButtonRef.current) {
@@ -77,7 +90,9 @@ function Button({
 			aria-label={isIconOnly}
 			className={`Moon-Rock_Button ${isMultiline ? "Moon-Rock_Button--multiline" : ""} ${
 				isDisabled ? "Moon-Rock_Button--disabled" : ""
-			} ${removeBiasStyles ? "" : "Moon-Rock_Button--BiasStyles"}`}
+			} ${removeBiasStyles ? "" : "Moon-Rock_Button--BiasStyles"} ${
+				cssVar ? "Moon-Rock_Button--cssVar" : ""
+			}`}
 			ref={ButtonRef}
 			disabled={isDisabled}
 			aria-disabled={isDisabled}

diff --git a/packages/components/button/src/index.ts b/packages/components/button/src/index.ts
@@ -1,6 +1,6 @@
 import { Button } from "./Button.tsx";
 
-import type buttonPropsT from "./buttonPropsT.ts";
+import type buttonPropsT from "../../../types/buttonPropsT.ts";
 
 export { Button };
 export type { buttonPropsT };
diff --git a/packages/components/button/stories/button.stories.tsx b/packages/components/button/stories/button.stories.tsx
@@ -14,7 +14,23 @@ const meta: Meta<typeof Button> = {
 		isMultiline: false,
 		removeBiasStyles: false,
 	},
-	// decorators:[] use the main context
+	decorators: [
+		(Button) => {
+			return (
+				<div
+					style={{
+						display: "flex",
+						width: "100%",
+						height: "100vh",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					<Button />
+				</div>
+			);
+		},
+	],
 };
 
 type Story = StoryObj<typeof Button>;

diff --git a/packages/components/moonRockUi/src/MoonRockUi.tsx b/packages/components/moonRockUi/src/MoonRockUi.tsx
@@ -1,17 +1,29 @@
-import { createContext } from "react";
+import { createContext, useState } from "react";
 
-type MoonRockUiProviderPropsT = {
-	children: React.ReactNode;
+import buttonPropsT from "../../../types/buttonPropsT.ts";
+
+type contextT = {
+	button?: buttonPropsT;
 };
 
-type MoonRockUiContextT = {
-	test: string;
+type MoonRockUiProviderPropsT = {
+	children: React.ReactNode;
 };
 
-const MOON_ROCK_UI = createContext<MoonRockUiContextT | undefined>(undefined);
+const MOON_ROCK_UI = createContext<contextT | undefined>(undefined);
 
 function MoonRockUi({ children }: MoonRockUiProviderPropsT) {
-	return <MOON_ROCK_UI.Provider value={undefined}>{children}</MOON_ROCK_UI.Provider>;
+	// const [CONTEXT, setContext] = useState<contextT>({button: b});
+
+	return (
+		<MOON_ROCK_UI.Provider value={undefined}>
+			<div>{children}</div>
+		</MOON_ROCK_UI.Provider>
+	);
+}
+
+function App() {
+	return <MoonRockUi>test</MoonRockUi>;
 }
 
 export default MoonRockUi;

diff --git a/packages/hooks/useCssVariable.tsx b/packages/hooks/useCssVariable.tsx
@@ -6,16 +6,18 @@ type ElementWithStyle = HTMLElement & {
 
 export default function useCssVariable<elementT extends ElementWithStyle>(
 	variableName: string,
-	variableValue: string,
+	variableValue: string | undefined,
 	ROOT?: React.RefObject<elementT> | undefined,
 ) {
 	useLayoutEffect(() => {
 		const root = ROOT?.current;
-		if (ROOT) {
-			root?.style.setProperty(variableName, variableValue);
-		} else {
-			const root = document.querySelector(":root") as HTMLElement | null;
-			root?.style.setProperty(variableName, variableValue);
+		if (typeof variableValue === "string") {
+			if (ROOT) {
+				root?.style.setProperty(variableName, variableValue);
+			} else {
+				const root = document.querySelector(":root") as HTMLElement | null;
+				root?.style.setProperty(variableName, variableValue);
+			}
 		}
 	}, [ROOT, variableName, variableValue]);
 }

diff --git a/...ges/components/button/src/buttonPropsT.ts → packages/types/buttonPropsT.ts b/...ges/components/button/src/buttonPropsT.ts → packages/types/buttonPropsT.ts
@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 
-import { cssColorsT } from "../../../types/colors.ts";
+import { cssColorsT } from "./colors.ts";
 
 type nativeButtonPropsT = ComponentProps<"button">;
 
@@ -17,6 +17,7 @@ type customButtonPropsT = {
 	isDisabled?: boolean;
 	isIconOnly?: string;
 	removeBiasStyles?: boolean;
+	cssVar?: boolean;
 	colors?: {
 		textColor: cssColorsT | string;
 		backgroundColor: cssColorsT | string;