feat: themed badge component

packages/tester/docs/test/extra.mdx

@@ -1,4 +1,4 @@
-import { Card, LinkCard, PackageManagerTabs, Tabs, Tab } from '@theme';
+import { Badge,Card, LinkCard, PackageManagerTabs, Tabs, Tab } from '@theme';
 
 # Hello World!
 
@@ -138,3 +138,22 @@ This loader uses `flow-remove-types` under the hood. You can learn more about it
   title="Programmatic API"
   content="I want to use the core functionalities but adjust the presentation of the license report, or process the data in a different way."
 />
+
+## Badges
+<br />
+<Badge text="tip" type="tip" />
+<Badge text="info" type="info" />
+<Badge text="warning" type="warning" />
+<Badge text="danger" type="danger" />
+<Badge text="note" type="note" />
+
+
+## Custom Badges
+<br />
+<Badge>
+  <img
+    style={{ height: '18px' }}
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/rspress-logo.png"
+  />
+  <span>Rspress</span>
+</Badge>

packages/theme/src/plugin/theme.ts

@@ -1,5 +1,6 @@
 import {
   Announcement,
+  Badge,
   Button,
   Card,
   HomeBanner,
@@ -46,6 +47,7 @@ export {
   Layout,
   // components
   Announcement,
+  Badge,
   Button,
   Card,
   HomeBanner,

packages/theme/src/styles/styles.css

@@ -842,51 +842,6 @@ footer {
   border: none !important;
 }
 
-/* Badge */
-span[class*="badge_"] {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-  line-height: 1.5 !important;
-  border-radius: var(--rp-radius-small) !important;
-  padding: 0 6px !important;
-}
-
-/* Badges info colors */
-span[class*="badge_"][class*="info_"] {
-  color: var(--rp-container-info-border) !important;
-  background-color: var(--rp-container-info-bg) !important;
-}
-
-/* Badges tip colors */
-span[class*="badge_"][class*="tip_"] {
-  color: var(--rp-container-tip-border) !important;
-  background-color: var(--rp-container-tip-bg) !important;
-}
-
-/* Badges warning colors */
-span[class*="badge_"][class*="warning_"] {
-  color: var(--rp-container-warning-border) !important;
-  background-color: var(--rp-container-warning-bg) !important;
-}
-
-/* Badges danger colors */
-span[class*="badge_"][class*="danger_"] {
-  color: var(--rp-container-danger-border) !important;
-  background-color: var(--rp-container-danger-bg) !important;
-}
-
-/* Badges note colors */
-span[class*="badge_"][class*="note_"] {
-  color: var(--rp-container-note-border) !important;
-  background-color: var(--rp-container-note-bg) !important;
-}
-
-/* Badges details colors */
-span[class*="badge_"][class*="details_"] {
-  color: var(--rp-container-details-border) !important;
-  background-color: var(--rp-container-details-bg) !important;
-}
-
 /* container */
 .rspress-directive {
   background: none !important;

packages/theme/src/theme/components/badge/index.module.scss

@@ -0,0 +1,63 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  padding-inline: 0.625rem;
+  height: 1.5rem;
+  gap: 0.25rem;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  border: 1px solid transparent;
+  border-radius: var(--rp-radius-small);
+  padding: 0 6px;
+  transition: color 0.25s;
+
+  &.tip {
+    color: var(--rp-container-tip-border);
+    background-color: var(--rp-container-tip-bg);
+  }
+
+  &.info {
+    color: var(--rp-container-info-border);
+    background-color: var(--rp-container-info-bg);
+  }
+
+  &.warning {
+    color: var(--rp-container-warning-border);
+    background-color: var(--rp-container-warning-bg);
+  }
+
+  &.danger {
+    color: var(--rp-container-danger-border);
+    background-color: var(--rp-container-danger-bg);
+  }
+
+  &.note {
+    color: var(--rp-container-note-border);
+    background-color: var(--rp-container-note-bg);
+  }
+}
+
+.outline {
+  &.tip {
+    border-color: var(--rp-container-tip-border);
+  }
+
+  &.info {
+    border-color: var(--rp-container-info-border);
+  }
+
+  &.warning {
+    border-color: var(--rp-container-warning-border);
+  }
+
+  &.danger {
+    border-color: var(--rp-container-danger-border);
+  }
+
+  &.note {
+    border-color: var(--rp-container-note-border);
+  }
+}

packages/theme/src/theme/components/badge/index.tsx

@@ -0,0 +1,41 @@
+import styles from './index.module.scss';
+
+interface BadgeProps {
+  /**
+   * The content to display inside the badge. Can be a string or React nodes.
+   */
+  children?: React.ReactNode;
+  /**
+   * The type of badge, which determines its color and style.
+   * @default 'tip'
+   */
+  type?: 'tip' | 'info' | 'warning' | 'danger' | 'note';
+  /**
+   * The text content to display inside the badge (for backwards compatibility).
+   */
+  text?: string;
+  /**
+   * Whether to display the badge with an outline style.
+   * @default false
+   */
+  outline?: boolean;
+}
+
+export function Badge({
+  children,
+  type = 'tip',
+  text,
+  outline = false,
+}: BadgeProps) {
+  const content = children || text;
+
+  return (
+    <span
+      className={`${styles.badge} ${styles[type]} ${
+        outline ? styles.outline : ''
+      }`}
+    >
+      {content}
+    </span>
+  );
+}

packages/theme/src/theme/components/index.ts

@@ -1,4 +1,5 @@
 export { Announcement } from './announcement';
+export { Badge } from './badge';
 export { Button } from './button';
 export { Card } from './card';
 export { HomeBanner } from './home-banner';