@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,391 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/breadcrumb.config.d.ts
+//#region src/breadcrumb.config.d.ts
+declare const breadcrumbConfig: ComponentConfig<{
+  Breadcrumb: {
+    readonly base: {
+      readonly root: {};
+      readonly list: {
+        readonly display: "flex";
+        readonly flexWrap: "wrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly listStyleType: "none";
+        readonly spacing: "0";
+        readonly margin: "0";
+      };
+      readonly item: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly link: {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly page: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly separator: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly color: string;
+      };
+      readonly ellipsis: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly color: string;
+      };
+    };
+  };
+}, {}>;
+type BreadcrumbConfig = typeof breadcrumbConfig; //#endregion
+//#endregion
+export { BreadcrumbConfig, breadcrumbConfig };

package/dist/components/dist/breadcrumb.config.js

@@ -0,0 +1,43 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/breadcrumb.config.js
+const breadcrumbConfig = defaultFoundationPreset.defineComponent("Breadcrumb", ({ tokens }) => ({ base: {
+	root: {},
+	list: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: tokens.spacing["1.5"],
+		listStyleType: "none",
+		spacing: "0",
+		margin: "0"
+	},
+	item: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: tokens.spacing["1.5"]
+	},
+	link: {
+		...textVariants.label2,
+		color: tokens.color["on-secondary"],
+		transition: "colors",
+		_hover: { color: tokens.color["on-primary"] }
+	},
+	page: {
+		...textVariants.label2,
+		color: tokens.color["on-primary"]
+	},
+	separator: {
+		display: "inline-flex",
+		alignItems: "center",
+		color: tokens.color["on-tertiary"]
+	},
+	ellipsis: {
+		display: "inline-flex",
+		alignItems: "center",
+		color: tokens.color["on-tertiary"]
+	}
+} }));
+//#endregion
+export { breadcrumbConfig };