@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,354 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/switch.config.d.ts
+//#region src/switch.config.d.ts
+declare const switchConfig: ComponentConfig<{
+  Switch: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly padding: "0";
+      };
+      readonly track: {
+        readonly width: "2.75rem";
+        readonly height: "1.5rem";
+        readonly borderRadius: string;
+        readonly padding: string;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly backgroundColor: string;
+        readonly transition: "background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly _dataStateOpen: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly thumb: {
+        readonly width: "1.25rem";
+        readonly height: "1.25rem";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+        readonly transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly _dataStateOpen: {
+          readonly transform: "translateX(20px)";
+        };
+      };
+      readonly label: {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly description: {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+  };
+}, {}>;
+type SwitchConfig = typeof switchConfig; //#endregion
+//#endregion
+export { SwitchConfig, switchConfig };

package/dist/components/dist/switch.config.js

@@ -0,0 +1,47 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/switch.config.js
+const switchConfig = defaultFoundationPreset.defineComponent("Switch", ({ tokens }) => ({ base: {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacing["3"],
+		cursor: "pointer",
+		backgroundColor: "transparent",
+		padding: "0"
+	},
+	track: {
+		width: "2.75rem",
+		height: "1.5rem",
+		borderRadius: tokens.borderRadius.full,
+		padding: tokens.spacing["0.5"],
+		display: "flex",
+		alignItems: "center",
+		backgroundColor: tokens.bg.secondary,
+		transition: "background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+		_dataStateOpen: { backgroundColor: tokens.bg.brand }
+	},
+	thumb: {
+		width: "1.25rem",
+		height: "1.25rem",
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.bg.primary,
+		boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
+		transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+		_dataStateOpen: { transform: "translateX(20px)" }
+	},
+	label: {
+		...textVariants.label2,
+		color: tokens.color["on-primary"],
+		display: "flex",
+		flexDirection: "column"
+	},
+	description: {
+		...textVariants.label4,
+		color: tokens.color["on-secondary"],
+		fontWeight: tokens.fontWeight.normal
+	}
+} }));
+//#endregion
+export { switchConfig };