@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/button.config.d.ts

@@ -0,0 +1,382 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/button.config.d.ts
+//#region src/button.config.d.ts
+declare const buttonConfig: ComponentConfig<{
+  Button: {
+    readonly base: {
+      readonly root: {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly startIcon: {
+        readonly display: "flex";
+        readonly flexShrink: "0";
+      };
+      readonly endIcon: {
+        readonly display: "flex";
+        readonly flexShrink: "0";
+      };
+    };
+    readonly variants: {
+      readonly size: {
+        readonly xs: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "0.6875rem";
+            readonly lineHeight: string;
+            readonly borderRadius: string;
+          };
+        };
+        readonly sm: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "0.75rem";
+            readonly borderRadius: string;
+          };
+        };
+        readonly md: {
+          readonly root: {
+            readonly padding: string;
+            readonly fontSize: "0.875rem";
+          };
+        };
+        readonly lg: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "1rem";
+          };
+        };
+      };
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly outline: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly borderWidth: string;
+            readonly borderColor: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly ghost: {
+          readonly root: {
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly danger: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly inverse: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type ButtonConfig = typeof buttonConfig; //#endregion
+//#endregion
+export { ButtonConfig, buttonConfig };

package/dist/components/dist/button.config.js

@@ -0,0 +1,91 @@
+import { darker, lighter } from "../../config/dist/createConfig.js";
+import "../../config/dist/index.js";
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/button.config.js
+const buttonConfig = defaultFoundationPreset.defineComponent("Button", ({ tokens }) => ({
+	base: {
+		root: {
+			...textVariants.label1,
+			display: "inline-flex",
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: tokens.spacing["1.5"],
+			padding: tokens.spacing["3"],
+			borderRadius: tokens.borderRadius.md
+		},
+		startIcon: {
+			display: "flex",
+			flexShrink: "0"
+		},
+		endIcon: {
+			display: "flex",
+			flexShrink: "0"
+		}
+	},
+	variants: {
+		size: {
+			xs: { root: {
+				padding: `${tokens.spacing["0.5"]} ${tokens.spacing["1.5"]}`,
+				fontSize: "0.6875rem",
+				lineHeight: tokens.lineHeight.tight,
+				borderRadius: tokens.borderRadius.xs
+			} },
+			sm: { root: {
+				padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
+				fontSize: "0.75rem",
+				borderRadius: tokens.borderRadius.sm
+			} },
+			md: { root: {
+				padding: tokens.spacing["3"],
+				fontSize: "0.875rem"
+			} },
+			lg: { root: {
+				padding: `${tokens.spacing["4"]} ${tokens.spacing["6"]}`,
+				fontSize: "1rem"
+			} }
+		},
+		variant: {
+			brand: { root: {
+				backgroundColor: tokens.bg.brand,
+				color: tokens.color["on-brand"],
+				_hover: { backgroundColor: darker(tokens.bg.brand, 10) }
+			} },
+			outline: { root: {
+				backgroundColor: tokens.bg.primary,
+				color: tokens.color["on-primary"],
+				borderWidth: tokens.borderWidth.thin,
+				borderColor: tokens.borderColor.secondary,
+				_hover: { backgroundColor: tokens.bg.tertiary }
+			} },
+			ghost: { root: {
+				color: tokens.color["on-primary"],
+				_hover: { backgroundColor: tokens.bg.secondary }
+			} },
+			danger: { root: {
+				backgroundColor: tokens.bg.alert,
+				color: tokens.color["on-alert"],
+				_hover: { backgroundColor: darker(tokens.bg.alert, 10) }
+			} },
+			positive: { root: {
+				backgroundColor: tokens.bg.positive,
+				color: tokens.color["on-positive"],
+				_hover: { backgroundColor: darker(tokens.bg.positive, 10) }
+			} },
+			accent: { root: {
+				backgroundColor: tokens.bg.accent,
+				color: tokens.color["on-accent"],
+				_hover: { backgroundColor: darker(tokens.bg.accent, 10) }
+			} },
+			inverse: { root: {
+				backgroundColor: tokens.bg.inverse,
+				color: tokens.color["on-inverse"],
+				_hover: { backgroundColor: lighter(tokens.bg.inverse, 15) }
+			} }
+		}
+	}
+}));
+//#endregion
+export { buttonConfig };