feat: glow

packages/website-ue/src/components/Badge/index.module.css

@@ -5,4 +5,13 @@
 
   font-size: var(--font-size-minor);
   font-weight: var(--weight-medium);
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
+  .svg {
+    width: 1em;
+    height: 1em;
+  }
 }

packages/website-ue/src/components/Badge/index.tsx

@@ -1,7 +1,8 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
 import type { Color } from "../../core/ui/color";
-import "./index.css";
+import { LIGHT_TEXT_COLORS } from "../Button";
+import styles from "./index.module.css";
 
 export interface BadgeProps extends ComponentProps<"div"> {
   color?: Color | "accent";
@@ -15,13 +16,14 @@ export function Badge({
   highContrast,
   ...props
 }: BadgeProps) {
+  const lightText = LIGHT_TEXT_COLORS.has(color as Color);
+
   return (
     <div
-      className={classNames("badge", className)}
+      className={classNames(styles.badge, className)}
       style={{
         backgroundColor: `var(--${color}-${highContrast ? 12 : 9})`,
-        color: `var(--gray-${highContrast ? 1 : 12})`,
-
+        color: `var(--gray-${highContrast || lightText ? 1 : 12})`,
         ...style,
       }}
       {...props}