@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,353 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/textarea.config.d.ts
+//#region src/textarea.config.d.ts
+declare const textareaConfig: ComponentConfig<{
+  Textarea: {
+    readonly base: {
+      readonly root: {
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly outlineStyle: "none";
+        readonly _focus: {
+          readonly borderColor: string;
+          readonly outlineStyle: "none";
+        };
+        readonly _placeholder: {
+          readonly color: string;
+        };
+      };
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly default: {
+          readonly root: {};
+        };
+        readonly ghost: {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+      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";
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type TextareaConfig = typeof textareaConfig; //#endregion
+//#endregion
+export { TextareaConfig, textareaConfig };

package/dist/components/dist/textarea.config.js

@@ -0,0 +1,57 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/textarea.config.js
+const textareaConfig = defaultFoundationPreset.defineComponent("Textarea", ({ tokens }) => ({
+	base: { root: {
+		backgroundColor: tokens.bg.primary,
+		color: tokens.color["on-primary"],
+		padding: tokens.spacing["3"],
+		borderRadius: tokens.borderRadius.md,
+		borderWidth: tokens.borderWidth.thin,
+		borderColor: tokens.borderColor.secondary,
+		outlineStyle: "none",
+		_focus: {
+			borderColor: tokens.borderColor.brand,
+			outlineStyle: "none"
+		},
+		_placeholder: { color: tokens.color["on-secondary"] }
+	} },
+	variants: {
+		variant: {
+			default: { root: {} },
+			ghost: { root: {
+				...textVariants.label4,
+				backgroundColor: "transparent",
+				borderWidth: "0",
+				borderRadius: "0",
+				padding: "0",
+				resize: "none",
+				_focus: { borderColor: "transparent" }
+			} }
+		},
+		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"
+			} }
+		}
+	}
+}));
+//#endregion
+export { textareaConfig };