extract colors from styles

Author: alexcarpenter

packages/ui/src/mosaic/components/badge/badge.styles.ts

@@ -20,7 +20,9 @@ export const styles = stylex.create({
     whiteSpace: 'nowrap',
     height: space['5'],
   },
+});
 
+export const colors = stylex.create({
   primary: {
     backgroundColor: colorVars['--cl-color-primary'],
     color: colorVars['--cl-color-primary-foreground'],

packages/ui/src/mosaic/components/badge/badge.tsx

@@ -1,9 +1,23 @@
+/**
+ * @file Badge.tsx
+ * @input Uses React, HTMLAttributes
+ * @output Exports Badge component, BadgeProps, BadgeVariant types
+ * @position Core implementation; consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Badge/Badge.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/Badge/Badge.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Badge/index.ts (exports if types change)
+ * - /apps/storybook/stories/Badge.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/Badge/ (showcase blocks)
+ */
+
 import { type ComponentProps, type RenderProp, useRender } from '@clerk/headless/utils';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
 import { mergeStyleProps, themeProps } from '../../props';
-import { styles } from './badge.styles';
+import { colors, styles } from './badge.styles';
 
 export type BadgeProps = Omit<ComponentProps<'span'>, 'render'> & {
   color?: 'primary' | 'neutral' | 'warning' | 'negative' | 'positive';
@@ -19,7 +33,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Mosa
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('badge', { color }), stylex.props(styles.base, styles[color]), className, style),
+      ...mergeStyleProps(themeProps('badge', { color }), stylex.props(styles.base, colors[color]), className, style),
       ...rest,
     },
   });