@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,478 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/badge.config.d.ts
+//#region src/badge.config.d.ts
+declare const badgeConfig: ComponentConfig<{
+  Badge: {
+    readonly base: {
+      readonly root: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+      };
+      readonly dot: {
+        readonly width: "0.375rem";
+        readonly height: "0.375rem";
+        readonly borderRadius: string;
+        readonly display: "none";
+      };
+      readonly text: {
+        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 variants: {
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly outline: {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: string;
+            readonly borderColor: string;
+          };
+        };
+        readonly 'on-brand': {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: string;
+            readonly borderColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly 'dot-positive': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+        readonly 'dot-alert': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+        readonly 'dot-brand': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+      };
+      readonly size: {
+        readonly sm: {
+          readonly root: {
+            readonly gap: string;
+            readonly padding: `${string} ${string}`;
+          };
+          readonly dot: {
+            readonly width: "0.3rem";
+            readonly height: "0.3rem";
+          };
+          readonly text: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly md: {};
+        readonly lg: {
+          readonly root: {
+            readonly gap: string;
+            readonly padding: `${string} ${string}`;
+          };
+          readonly dot: {
+            readonly width: "0.45rem";
+            readonly height: "0.45rem";
+          };
+          readonly text: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly size: "md";
+    };
+  };
+}, {}>;
+type BadgeConfig = typeof badgeConfig; //#endregion
+//#endregion
+export { BadgeConfig, badgeConfig };

package/dist/components/dist/badge.config.js

@@ -0,0 +1,99 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/badge.config.js
+const badgeConfig = defaultFoundationPreset.defineComponent("Badge", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: tokens.spacing["1.5"],
+			padding: `${tokens.spacing["0.5"]} ${tokens.spacing["2"]}`,
+			borderRadius: tokens.borderRadius.full,
+			backgroundColor: tokens.bg.tertiary
+		},
+		dot: {
+			width: "0.375rem",
+			height: "0.375rem",
+			borderRadius: tokens.borderRadius.full,
+			display: "none"
+		},
+		text: {
+			...textVariants.label3,
+			color: tokens.color["on-primary"]
+		}
+	},
+	variants: {
+		variant: {
+			brand: {
+				root: { backgroundColor: tokens.bg.brand },
+				text: { color: tokens.color["on-brand"] }
+			},
+			positive: {
+				root: { backgroundColor: tokens.bg.positive },
+				text: { color: tokens.color["on-positive"] }
+			},
+			alert: {
+				root: { backgroundColor: tokens.bg.alert },
+				text: { color: tokens.color["on-alert"] }
+			},
+			accent: {
+				root: { backgroundColor: tokens.bg.accent },
+				text: { color: tokens.color["on-accent"] }
+			},
+			outline: { root: {
+				backgroundColor: "transparent",
+				borderWidth: tokens.borderWidth.thin,
+				borderColor: tokens.borderColor.secondary
+			} },
+			"on-brand": {
+				root: {
+					backgroundColor: "transparent",
+					borderWidth: tokens.borderWidth.thin,
+					borderColor: tokens.borderColor.inverse
+				},
+				text: { color: tokens.color["on-brand"] }
+			},
+			"dot-positive": { dot: {
+				display: "block",
+				backgroundColor: tokens.color.positive
+			} },
+			"dot-alert": { dot: {
+				display: "block",
+				backgroundColor: tokens.color.alert
+			} },
+			"dot-brand": { dot: {
+				display: "block",
+				backgroundColor: tokens.color.brand
+			} }
+		},
+		size: {
+			sm: {
+				root: {
+					gap: tokens.spacing["1"],
+					padding: `${tokens.spacing["0"]} ${tokens.spacing["1.5"]}`
+				},
+				dot: {
+					width: "0.3rem",
+					height: "0.3rem"
+				},
+				text: { ...textVariants.label4 }
+			},
+			md: {},
+			lg: {
+				root: {
+					gap: tokens.spacing["2"],
+					padding: `${tokens.spacing["1"]} ${tokens.spacing["2.5"]}`
+				},
+				dot: {
+					width: "0.45rem",
+					height: "0.45rem"
+				},
+				text: { ...textVariants.label2 }
+			}
+		}
+	},
+	defaultVariants: { size: "md" }
+}));
+//#endregion
+export { badgeConfig };